more updates for new fa-icon css prefix

This commit is contained in:
davegandy 2013-10-07 17:25:45 -04:00
parent f1211a1a7b
commit a72b212e17
26 changed files with 452 additions and 451 deletions

View File

@ -21,7 +21,7 @@
</li> </li>
<li> <li>
Concrete objects make good icons, since abstract concepts are, well, abstract. It's harder to make an icon Concrete objects make good icons, since abstract concepts are, well, abstract. It's harder to make an icon
to represent happiness. It's easier to make a smiley face. <i class="fa fa-smile"></i> to represent happiness. It's easier to make a smiley face. <i class="fa-icon fa-icon-smile"></i>
</li> </li>
</ol> </ol>
</section> </section>

View File

@ -2,18 +2,18 @@
<h2 class="page-header">Animated Spinner</h2> <h2 class="page-header">Animated Spinner</h2>
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
Use the <code>fa-spin</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>, Use the <code>fa-icon-spin</code> class to get any icon to rotate. Works well with <code>fa-icon-spinner</code>,
<code>fa-refresh</code>, and <code>fa-cog</code>. <code>fa-icon-refresh</code>, and <code>fa-icon-cog</code>.
</div> </div>
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
<div class="well well-large well-transparent lead"> <div class="well well-large well-transparent lead">
<i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content... <i class="fa-icon fa-icon-spinner fa-icon-spin fa-icon-lg"></i> Spinner icon when loading content...
</div> </div>
{% highlight html %} {% highlight html %}
<i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content... <i class="fa-icon fa-icon-spinner fa-icon-spin fa-icon-lg"></i> Spinner icon when loading content...
{% endhighlight %} {% endhighlight %}
<p class="alert alert-info"> <p class="alert alert-info">
<i class="fa fa-info-sign"></i> CSS3 animations aren't supported in IE8 - IE9. <i class="fa-icon fa-icon-info-sign"></i> CSS3 animations aren't supported in IE8 - IE9.
</p> </p>
</div> </div>
</div> </div>

View File

@ -3,29 +3,29 @@
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<p> <p>
Use <code>fa-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or Use <code>fa-icon-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
article graphics. article graphics.
</p> </p>
</div> </div>
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
<div class="well well-large well-transparent"> <div class="well well-large well-transparent">
<i class="fa fa-quote-left fa-4x pull-left fa-muted"></i> <i class="fa-icon fa-icon-quote-left fa-icon-4x pull-left fa-icon-muted"></i>
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all
of them in any combination to get lots of new possibilities. of them in any combination to get lots of new possibilities.
</div> </div>
{% highlight html %} {% highlight html %}
<i class="fa fa-quote-left fa-4x pull-left fa-muted"></i> <i class="fa-icon fa-icon-quote-left fa-icon-4x pull-left fa-icon-muted"></i>
Use a few of the new styles together ... lots of new possibilities. Use a few of the new styles together ... lots of new possibilities.
{% endhighlight %} {% endhighlight %}
<div class="well well-large well-transparent clearfix"> <div class="well well-large well-transparent clearfix">
<i class="fa fa-flag fa-4x pull-left fa-border"></i> <i class="fa-icon fa-icon-flag fa-icon-4x pull-left fa-icon-border"></i>
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all
of them in any combination to get lots of new possibilities. of them in any combination to get lots of new possibilities.
</div> </div>
{% highlight html %} {% highlight html %}
<i class="fa fa-flag fa-4x pull-left fa-border"></i> <i class="fa-icon fa-icon-flag fa-icon-4x pull-left fa-icon-border"></i>
Use a few of the new styles together ... lots of new possibilities. Use a few of the new styles together ... lots of new possibilities.
{% endhighlight %} {% endhighlight %}
</div> </div>

View File

@ -3,13 +3,13 @@
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<div class="btn-group open"> <div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a> <a class="btn btn-primary" href="#"><i class="fa-icon fa-icon-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down"></span></a> <span class="fa-icon fa-icon-caret-down"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li> <li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash fa-fixed-width"></i> Delete</a></li> <li><a href="#"><i class="fa-icon fa-icon-trash fa-icon-fixed-width"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban-circle fa-fixed-width"></i> Ban</a></li> <li><a href="#"><i class="fa-icon fa-icon-ban-circle fa-icon-fixed-width"></i> Ban</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li> <li><a href="#"><i class="i"></i> Make admin</a></li>
</ul> </ul>
@ -18,19 +18,19 @@
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
{% highlight html %} {% highlight html %}
<div class="btn-group open"> <div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a> <a class="btn btn-primary" href="#"><i class="fa-icon fa-icon-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down"></span></a> <span class="fa-icon fa-icon-caret-down"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li> <li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash fa-fixed-width"></i> Delete</a></li> <li><a href="#"><i class="fa-icon fa-icon-trash fa-icon-fixed-width"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban-circle fa-fixed-width"></i> Ban</a></li> <li><a href="#"><i class="fa-icon fa-icon-ban-circle fa-icon-fixed-width"></i> Ban</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li> <li><a href="#"><i class="i"></i> Make admin</a></li>
</ul> </ul>
</div> </div>
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info"><i class="fa fa-info-sign"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div> <div class="alert alert-info"><i class="fa-icon fa-icon-info-sign"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div>
</div> </div>
</div> </div>
</section> </section>

View File

@ -4,20 +4,20 @@
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<p> <p>
<div class="btn-group"> <div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a> <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-left"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a> <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-center"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a> <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-right"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a> <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-justify"></i></a>
</div> </div>
</p> </p>
</div> </div>
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
{% highlight html %} {% highlight html %}
<div class="btn-group"> <div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a> <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-left"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a> <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-center"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a> <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-right"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a> <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-justify"></i></a>
</div> </div>
{% endhighlight %} {% endhighlight %}
</div> </div>

View File

@ -4,53 +4,53 @@
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<p> <p>
<a class="btn btn-default" href="#"> <a class="btn btn-default" href="#">
<i class="fa fa-repeat"></i> Reload</a> <i class="fa-icon fa-icon-repeat"></i> Reload</a>
<a class="btn btn-success" href="#"> <a class="btn btn-success" href="#">
<i class="fa fa-shopping-cart fa-lg"></i> Checkout</a> <i class="fa-icon fa-icon-shopping-cart fa-icon-lg"></i> Checkout</a>
</p> </p>
<p> <p>
<a class="btn btn-large btn-primary" href="#"> <a class="btn btn-large btn-primary" href="#">
<i class="fa fa-comment"></i> Comment</a> <i class="fa-icon fa-icon-comment"></i> Comment</a>
<a class="btn btn-sm btn-info" href="#"> <a class="btn btn-sm btn-info" href="#">
<i class="fa fa-info-sign"></i> Info</a> <i class="fa-icon fa-icon-info-sign"></i> Info</a>
</p> </p>
<p> <p>
<a class="btn btn-danger" href="#"> <a class="btn btn-danger" href="#">
<i class="fa fa-trash fa-lg"></i> Delete</a> <i class="fa-icon fa-icon-trash fa-icon-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#"> <a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a> <i class="fa-icon fa-icon-cog"></i> Settings</a>
</p> </p>
<p> <p>
<a class="btn btn-lg btn-danger" href="#"> <a class="btn btn-lg btn-danger" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> <i class="fa-icon fa-icon-flag fa-icon-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
</p> </p>
<p> <p>
<a class="btn btn-primary" href="#"> <a class="btn btn-primary" href="#">
<i class="fa fa-refresh fa-spin"></i> Synchronizing Content...</a> <i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Synchronizing Content...</a>
</p> </p>
</div> </div>
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
<p> <p>
Font Awesome icons work great in buttons. You can even combine them with larger icon styles, Font Awesome icons work great in buttons. You can even combine them with larger icon styles,
<code>pull-right</code> and <code>pull-left</code>, and <code>fa-spin</code>. <code>pull-right</code> and <code>pull-left</code>, and <code>fa-icon-spin</code>.
</p> </p>
{% highlight html %} {% highlight html %}
<a class="btn btn-default" href="#"> <a class="btn btn-default" href="#">
<i class="fa fa-repeat"></i> Reload</a> <i class="fa-icon fa-icon-repeat"></i> Reload</a>
<a class="btn btn-success" href="#"> <a class="btn btn-success" href="#">
<i class="fa fa-shopping-cart fa-lg"></i> Checkout</a> <i class="fa-icon fa-icon-shopping-cart fa-icon-lg"></i> Checkout</a>
<a class="btn btn-lg btn-primary" href="#"> <a class="btn btn-lg btn-primary" href="#">
<i class="fa fa-comment"></i> Comment</a> <i class="fa-icon fa-icon-comment"></i> Comment</a>
<a class="btn btn-sm btn-info" href="#"> <a class="btn btn-sm btn-info" href="#">
<i class="fa fa-info-sign"></i> Info</a> <i class="fa-icon fa-icon-info-sign"></i> Info</a>
<a class="btn btn-danger" href="#"> <a class="btn btn-danger" href="#">
<i class="fa fa-trash fa-lg"></i> Delete</a> <i class="fa-icon fa-icon-trash fa-icon-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#"> <a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a> <i class="fa-icon fa-icon-cog"></i> Settings</a>
<a class="btn btn-lg btn-danger" href="#"> <a class="btn btn-lg btn-danger" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> <i class="fa-icon fa-icon-flag fa-icon-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
<a class="btn btn-primary" href="#"> <a class="btn btn-primary" href="#">
<i class="fa fa-refresh fa-spin"></i> Synchronizing Content...</a> <i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Synchronizing Content...</a>
{% endhighlight %} {% endhighlight %}
</div> </div>
</div> </div>

View File

@ -3,12 +3,12 @@
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span> <span class="input-group-addon"><i class="fa-icon fa-icon-envelope"></i></span>
<input class="form-control" type="text" placeholder="Email address"> <input class="form-control" type="text" placeholder="Email address">
</div> </div>
<br> <br>
<div class="input-group"> <div class="input-group">
<span class="input-group-addon"><i class="fa fa-key"></i></span> <span class="input-group-addon"><i class="fa-icon fa-icon-key"></i></span>
<input class="form-control" type="password" placeholder="Password"> <input class="form-control" type="password" placeholder="Password">
</div> </div>
</div> </div>
@ -16,11 +16,11 @@
{% highlight html %} {% highlight html %}
<form> <form>
<div class="input-prepend"> <div class="input-prepend">
<span class="add-on"><i class="fa fa-envelope"></i></span> <span class="add-on"><i class="fa-icon fa-icon-envelope"></i></span>
<input class="span2" type="text" placeholder="Email address"> <input class="span2" type="text" placeholder="Email address">
</div> </div>
<div class="input-prepend"> <div class="input-prepend">
<span class="add-on"><i class="fa fa-key"></i></span> <span class="add-on"><i class="fa-icon fa-icon-key"></i></span>
<input class="span2" type="password" placeholder="Password"> <input class="span2" type="password" placeholder="Password">
</div> </div>
</form> </form>

View File

@ -7,13 +7,13 @@
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
<div class="well well-transparent"> <div class="well well-transparent">
<div style="font-size: 24px; line-height: 1.5em;"> <div style="font-size: 24px; line-height: 1.5em;">
<i class="fa fa-camera-retro"></i> icon-camera-retro <i class="fa-icon fa-icon-camera-retro"></i> icon-camera-retro
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<i class="fa fa-camera-retro"></i> icon-camera-retro <i class="fa-icon fa-icon-camera-retro"></i> icon-camera-retro
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info"><i class="fa fa-info-sign"></i> Icon classes are echoed via CSS :before.</div> <div class="alert alert-info"><i class="fa-icon fa-icon-info-sign"></i> Icon classes are echoed via CSS :before.</div>
</div> </div>
</div> </div>
</section> </section>

View File

@ -3,31 +3,31 @@
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<p> <p>
To increase the size of icons relative to its container, use <code>fa-lg</code>, <code>fa-2x</code>, To increase the size of icons relative to its container, use <code>fa-icon-lg</code>, <code>fa-icon-2x</code>,
<code>fa-3x</code>, or <code>fa-4x</code>. <code>fa-icon-3x</code>, or <code>fa-icon-4x</code>.
</p> </p>
</div> </div>
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
<p> <p>
Increase the icon size by using the <code>fa-lg</code> (33% increase), <code>fa-2x</code>, Increase the icon size by using the <code>fa-icon-lg</code> (33% increase), <code>fa-icon-2x</code>,
<code>fa-3x</code>, or <code>fa-4x</code> classes. <code>fa-icon-3x</code>, or <code>fa-icon-4x</code> classes.
</p> </p>
<div class="well well-transparent"> <div class="well well-transparent">
<div style="font-size: 24px; line-height: 1.5em;"> <div style="font-size: 24px; line-height: 1.5em;">
<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p> <p><i class="fa-icon fa-icon-camera-retro fa-icon-lg"></i> fa-icon-camera-retro</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p> <p><i class="fa-icon fa-icon-camera-retro fa-icon-2x"></i> fa-icon-camera-retro</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p> <p><i class="fa-icon fa-icon-camera-retro fa-icon-3x"></i> fa-icon-camera-retro</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p> <p><i class="fa-icon fa-icon-camera-retro fa-icon-4x"></i> fa-icon-camera-retro</p>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p> <p><i class="fa-icon fa-icon-camera-retro fa-icon-lg"></i> fa-icon-camera-retro</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p> <p><i class="fa-icon fa-icon-camera-retro fa-icon-2x"></i> fa-icon-camera-retro</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p> <p><i class="fa-icon fa-icon-camera-retro fa-icon-3x"></i> fa-icon-camera-retro</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p> <p><i class="fa-icon fa-icon-camera-retro fa-icon-4x"></i> fa-icon-camera-retro</p>
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info"> <div class="alert alert-info">
<i class="fa fa-info-sign"></i> If your icons are getting chopped off on top and bottom, make sure you have <i class="fa-icon fa-icon-info-sign"></i> If your icons are getting chopped off on top and bottom, make sure you have
sufficient line-height. sufficient line-height.
</div> </div>
</div> </div>

View File

@ -2,28 +2,28 @@
<h2 class="page-header">List Bullets</h2> <h2 class="page-header">List Bullets</h2>
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<ul class="fa-ul"> <ul class="fa-icon-ul">
<li><i class="fa-li fa fa-ok"></i>List bullets (like these)</li> <li><i class="fa-icon-li fa-icon fa-icon-ok"></i>List bullets (like these)</li>
<li><i class="fa-li fa fa-ok"></i>Buttons</li> <li><i class="fa-icon-li fa-icon fa-icon-ok"></i>Buttons</li>
<li><i class="fa-li fa fa-ok"></i>Button groups</li> <li><i class="fa-icon-li fa-icon fa-icon-ok"></i>Button groups</li>
<li><i class="fa-li fa fa-ok"></i>Navigation</li> <li><i class="fa-icon-li fa-icon fa-icon-ok"></i>Navigation</li>
<li><i class="fa-li fa fa-ok"></i>Prepended form inputs</li> <li><i class="fa-icon-li fa-icon fa-icon-ok"></i>Prepended form inputs</li>
<li><i class="fa-li fa fa-ok"></i>&hellip;and many more with custom CSS</li> <li><i class="fa-icon-li fa-icon fa-icon-ok"></i>&hellip;and many more with custom CSS</li>
</ul> </ul>
</div> </div>
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
<p>Easily replace individual list bullets.</p> <p>Easily replace individual list bullets.</p>
{% highlight html %} {% highlight html %}
<ul class="fa-ul"> <ul class="fa-icon-ul">
<li><i class="fa-li fa fa-ok"></i>Bulleted lists (like this one)</li> <li><i class="fa-icon-li fa-icon fa-icon-ok"></i>Bulleted lists (like this one)</li>
<li><i class="fa-li fa fa-ok"></i>Buttons</li> <li><i class="fa-icon-li fa-icon fa-icon-ok"></i>Buttons</li>
<li><i class="fa-li fa fa-ok"></i>Button groups</li> <li><i class="fa-icon-li fa-icon fa-icon-ok"></i>Button groups</li>
<li><i class="fa-li fa fa-ok"></i>Navigation</li> <li><i class="fa-icon-li fa-icon fa-icon-ok"></i>Navigation</li>
<li><i class="fa-li fa fa-ok"></i>Prepended form inputs</li> <li><i class="fa-icon-li fa-icon fa-icon-ok"></i>Prepended form inputs</li>
<li><i class="fa-li fa fa-ok"></i>&hellip;and many more with custom CSS</li> <li><i class="fa-icon-li fa-icon fa-icon-ok"></i>&hellip;and many more with custom CSS</li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<div class="alert alert-info"><i class="fa fa-info-sign"></i> Make sure to NOT include any whitespace after the icon declaration.</div> <div class="alert alert-info"><i class="fa-icon fa-icon-info-sign"></i> Make sure to NOT include any whitespace after the icon declaration.</div>
</div> </div>
</div> </div>
</section> </section>

View File

@ -3,20 +3,20 @@
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><i class="fa fa-home fa-fixed-width"></i> Home</a></li> <li class="active"><a href="#"><i class="fa-icon fa-icon-home fa-icon-fixed-width"></i> Home</a></li>
<li><a href="#"><i class="fa fa-book fa-fixed-width"></i> Library</a></li> <li><a href="#"><i class="fa-icon fa-icon-book fa-icon-fixed-width"></i> Library</a></li>
<li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Applications</a></li> <li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Applications</a></li>
<li><a href="#"><i class="fa fa-cogs fa-fixed-width"></i> Settings</a></li> <li><a href="#"><i class="fa-icon fa-icon-cogs fa-icon-fixed-width"></i> Settings</a></li>
</ul> </ul>
</div> </div>
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
<p>Use Font Awesome icons in navigation to provide helpful visual cues.</p> <p>Use Font Awesome icons in navigation to provide helpful visual cues.</p>
{% highlight html %} {% highlight html %}
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><i class="fa fa-home fa-fixed-width"></i> Home</a></li> <li class="active"><a href="#"><i class="fa-icon fa-icon-home fa-icon-fixed-width"></i> Home</a></li>
<li><a href="#"><i class="fa fa-book fa-fixed-width"></i> Library</a></li> <li><a href="#"><i class="fa-icon fa-icon-book fa-icon-fixed-width"></i> Library</a></li>
<li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Applications</a></li> <li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Applications</a></li>
<li><a href="#"><i class="fa fa-cogs fa-fixed-width"></i> Settings</a></li> <li><a href="#"><i class="fa-icon fa-icon-cogs fa-icon-fixed-width"></i> Settings</a></li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
</div> </div>

View File

@ -4,49 +4,49 @@
<div class="col-md-4"> <div class="col-md-4">
<h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4> <h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4>
<div class="well well-transparent"> <div class="well well-transparent">
<i class="fa fa-shield"></i>&nbsp; normal<br> <i class="fa-icon fa-icon-shield"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br> <i class="fa-icon fa-icon-shield fa-icon-rotate-90"></i>&nbsp; fa-icon-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br> <i class="fa-icon fa-icon-shield fa-icon-rotate-180"></i>&nbsp; fa-icon-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br> <i class="fa-icon fa-icon-shield fa-icon-rotate-270"></i>&nbsp; fa-icon-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br> <i class="fa-icon fa-icon-shield fa-icon-flip-horizontal"></i>&nbsp; fa-icon-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical <i class="fa-icon fa-icon-shield fa-icon-flip-vertical"></i>&nbsp; fa-icon-flip-vertical
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h4><a href="#stacked">Stacked Icons</a></h4> <h4><a href="#stacked">Stacked Icons</a></h4>
<div class="well well-transparent"> <div class="well well-transparent">
<div class="margin-top-sm margin-bottom-sm"> <div class="margin-top-sm margin-bottom-sm">
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-unchecked fa-stack-base"></i> <i class="fa-icon fa-icon-unchecked fa-icon-stack-base"></i>
<i class="fa fa-twitter"></i> <i class="fa-icon fa-icon-twitter"></i>
</span> </span>
fa-twitter on fa-check-empty<br> fa-icon-twitter on fa-icon-check-empty<br>
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-circle fa-stack-base"></i> <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i>
<i class="fa fa-flag fa-light"></i> <i class="fa-icon fa-icon-flag fa-icon-light"></i>
</span> </span>
fa-flag on fa-circle<br> fa-icon-flag on fa-icon-circle<br>
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-sign-blank fa-stack-base"></i> <i class="fa-icon fa-icon-sign-blank fa-icon-stack-base"></i>
<i class="fa fa-terminal fa-light"></i> <i class="fa-icon fa-icon-terminal fa-icon-light"></i>
</span> </span>
fa-terminal on fa-sign-blank<br> fa-icon-terminal on fa-icon-sign-blank<br>
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-camera"></i> <i class="fa-icon fa-icon-camera"></i>
<i class="fa fa-ban-circle fa-stack-base text-danger"></i> <i class="fa-icon fa-icon-ban-circle fa-icon-stack-base text-danger"></i>
</span> </span>
fa-camera on fa-ban-circle fa-icon-camera on fa-icon-ban-circle
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4> <h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4>
<div class="well well-transparent"> <div class="well well-transparent">
<ul class="fa-ul"> <ul class="fa-icon-ul">
<li><i class="fa fa-li fa-chevron-sign-right"></i>New bulleted lists</li> <li><i class="fa-icon fa-icon-li fa-icon-chevron-sign-right"></i>New bulleted lists</li>
<li><i class="fa fa-li fa-bullseye"></i>Fix some old bugs</li> <li><i class="fa-icon fa-icon-li fa-icon-bullseye"></i>Fix some old bugs</li>
<li><i class="fa fa-li fa-play-sign"></i>And deal with arbitrary</li> <li><i class="fa-icon fa-icon-li fa-icon-play-sign"></i>And deal with arbitrary</li>
<li><i class="fa fa-li fa-ok-sign"></i>Font sizes better</li> <li><i class="fa-icon fa-icon-li fa-icon-ok-sign"></i>Font sizes better</li>
</ul> </ul>
</div> </div>
</div> </div>

View File

@ -6,23 +6,23 @@
</div> </div>
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
<div class="well well-large well-transparent lead"> <div class="well well-large well-transparent lead">
<i class="fa fa-shield"></i>&nbsp; normal<br> <i class="fa-icon fa-icon-shield"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br> <i class="fa-icon fa-icon-shield fa-icon-rotate-90"></i>&nbsp; fa-icon-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br> <i class="fa-icon fa-icon-shield fa-icon-rotate-180"></i>&nbsp; fa-icon-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br> <i class="fa-icon fa-icon-shield fa-icon-rotate-270"></i>&nbsp; fa-icon-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br> <i class="fa-icon fa-icon-shield fa-icon-flip-horizontal"></i>&nbsp; fa-icon-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical <i class="fa-icon fa-icon-shield fa-icon-flip-vertical"></i>&nbsp; fa-icon-flip-vertical
</div> </div>
{% highlight html %} {% highlight html %}
<i class="fa fa-shield"></i>&nbsp; normal<br> <i class="fa-icon fa-icon-shield"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br> <i class="fa-icon fa-icon-shield fa-icon-rotate-90"></i>&nbsp; fa-icon-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br> <i class="fa-icon fa-icon-shield fa-icon-rotate-180"></i>&nbsp; fa-icon-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br> <i class="fa-icon fa-icon-shield fa-icon-rotate-270"></i>&nbsp; fa-icon-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br> <i class="fa-icon fa-icon-shield fa-icon-flip-horizontal"></i>&nbsp; fa-icon-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical <i class="fa-icon fa-icon-shield fa-icon-flip-vertical"></i>&nbsp; icon-flip-vertical
{% endhighlight %} {% endhighlight %}
<p class="alert alert-info"> <p class="alert alert-info">
<i class="fa fa-info-sign"></i> Rotating and flipping icons aren't yet supported in IE7. <i class="fa-icon fa-icon-info-sign"></i> Rotating and flipping icons aren't yet supported in IE7.
</p> </p>
</div> </div>
</div> </div>

View File

@ -2,53 +2,53 @@
<h2 class="page-header">Stacked Icons</h2> <h2 class="page-header">Stacked Icons</h2>
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent and A method for easily stacking multiple icons. Use the <code>fa-icon-stack</code> class on the parent and
<code>fa-stack-base</code> for the bottom icon. <code>fa-icon-stack-base</code> for the bottom icon.
</div> </div>
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
<div class="well well-large well-transparent lead"> <div class="well well-large well-transparent lead">
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-check-empty fa-stack-base"></i> <i class="fa-icon fa-icon-unchecked fa-icon-stack-base"></i>
<i class="fa fa-twitter"></i> <i class="fa-icon fa-icon-twitter"></i>
</span> </span>
fa-twitter on fa-check-empty<br> fa-icon-twitter on fa-icon-unchecked<br>
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-circle fa-stack-base"></i> <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i>
<i class="fa fa-flag fa-light"></i> <i class="fa-icon fa-icon-flag fa-icon-light"></i>
</span> </span>
fa-flag on fa-circle<br> fa-icon-flag on fa-icon-circle<br>
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-sign-blank fa-stack-base"></i> <i class="fa-icon fa-icon-sign-blank fa-icon-stack-base"></i>
<i class="fa fa-terminal fa-light"></i> <i class="fa-icon fa-icon-terminal fa-icon-light"></i>
</span> </span>
fa-terminal on fa-sign-blank<br> fa-icon-terminal on fa-icon-sign-blank<br>
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-camera"></i> <i class="fa-icon fa-icon-camera"></i>
<i class="fa fa-ban-circle fa-stack-base text-danger"></i> <i class="fa-icon fa-icon-ban-circle fa-icon-stack-base text-danger"></i>
</span> </span>
fa-camera on fa-ban-circle fa-icon-camera on fa-icon-ban-circle
</div> </div>
{% highlight html %} {% highlight html %}
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-check-empty fa-stack-base"></i> <i class="fa-icon fa-icon-unchecked fa-icon-stack-base"></i>
<i class="fa fa-twitter"></i> <i class="fa-icon fa-icon-twitter"></i>
</span> </span>
fa-twitter on fa-check-empty<br> fa-icon-twitter on fa-icon-unchecked<br>
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-circle fa-stack-base"></i> <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i>
<i class="fa fa-flag fa-light"></i> <i class="fa-icon fa-icon-flag fa-icon-light"></i>
</span> </span>
fa-flag on fa-circle<br> fa-icon-flag on fa-icon-circle<br>
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-sign-blank fa-stack-base"></i> <i class="fa-icon fa-icon-sign-blank fa-icon-stack-base"></i>
<i class="fa fa-terminal fa-light"></i> <i class="fa-icon fa-icon-terminal fa-icon-light"></i>
</span> </span>
fa-terminal on fa-sign-blank<br> fa-icon-terminal on fa-icon-sign-blank<br>
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-camera"></i> <i class="fa-icon fa-icon-camera"></i>
<i class="fa fa-ban-circle fa-stack-base text-danger"></i> <i class="fa-icon fa-icon-ban-circle fa-icon-stack-base text-danger"></i>
</span> </span>
fa-camera on fa-ban-circle fa-icon-camera on fa-icon-ban-circle
{% endhighlight %} {% endhighlight %}
</div> </div>
</div> </div>

View File

@ -8,9 +8,9 @@
<section> <section>
<div class="alert alert-info"> <div class="alert alert-info">
<ul class="fa-ul margin-bottom-none"> <ul class="fa-icon-ul margin-bottom-none">
<li> <li>
<i class="fa-li fa fa-info-sign fa-lg"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated: <i class="fa-icon-li fa-icon fa-icon-info-sign fa-icon-lg"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated:
"Font Awesome by Dave Gandy - http://fontawesome.io". "Font Awesome by Dave Gandy - http://fontawesome.io".
</li> </li>
</ul> </ul>
@ -22,7 +22,7 @@
<ul> <ul>
<li> <li>
Applies to all desktop and webfont files in the following directory: Applies to all desktop and webfont files in the following directory:
<code>font-awesome/font/</code>. <code>font-awesome/fonts/</code>.
</li> </li>
<li>License: {{ site.fontawesome.license.font.version }}</li> <li>License: {{ site.fontawesome.license.font.version }}</li>
<li>URL: <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.url }}</a></li> <li>URL: <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.url }}</a></li>
@ -34,8 +34,9 @@
<ul> <ul>
<li> <li>
Applies to all CSS and LESS files in the following directories: Applies to all CSS and LESS files in the following directories:
<code>font-awesome/css/</code> and <code>font-awesome/css/</code>,
<code>font-awesome/less/</code>. <code>font-awesome/less/</code>, and
<code>font-awesome/scss/</code>.
</li> </li>
<li>License: {{ site.fontawesome.license.code.version }}</li> <li>License: {{ site.fontawesome.license.code.version }}</li>
<li>URL: <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.url }}</a></li> <li>URL: <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.url }}</a></li>

View File

@ -1,6 +1,6 @@
<a href="#"><i class="fa fa-flag"></i>&nbsp; normal</a><br> <a href="#"><i class="fa-icon fa-icon-flag"></i>&nbsp; normal</a><br>
<a href="#"><i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90</a><br> <a href="#"><i class="fa-icon fa-icon-flag fa-icon-rotate-90"></i>&nbsp; fa-icon-rotate-90</a><br>
<a href="#"><i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180</a><br> <a href="#"><i class="fa-icon fa-icon-flag fa-icon-rotate-180"></i>&nbsp; fa-icon-rotate-180</a><br>
<a href="#"><i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270</a><br> <a href="#"><i class="fa-icon fa-icon-flag fa-icon-rotate-270"></i>&nbsp; fa-icon-rotate-270</a><br>
<a href="#"><i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal</a><br> <a href="#"><i class="fa-icon fa-icon-flag fa-icon-flip-horizontal"></i>&nbsp; fa-icon-flip-horizontal</a><br>
<a href="#"><i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical</a> <a href="#"><i class="fa-icon fa-icon-flag fa-icon-flip-vertical"></i>&nbsp; fa-icon-flip-vertical</a>

View File

@ -1,6 +1,6 @@
<a class="btn btn-default" href="#"><i class="fa fa-flag"></i>&nbsp; normal</a><br> <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-flag"></i>&nbsp; normal</a><br>
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90</a><br> <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-flag fa-icon-rotate-90"></i>&nbsp; fa-icon-rotate-90</a><br>
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180</a><br> <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-flag fa-icon-rotate-180"></i>&nbsp; fa-icon-rotate-180</a><br>
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270</a><br> <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-flag fa-icon-rotate-270"></i>&nbsp; fa-icon-rotate-270</a><br>
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal</a><br> <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-flag fa-icon-flip-horizontal"></i>&nbsp; fa-icon-flip-horizontal</a><br>
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical</a> <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-flag fa-icon-flip-vertical"></i>&nbsp; fa-icon-flip-vertical</a>

View File

@ -1,6 +1,6 @@
<i class="fa fa-flag"></i>&nbsp; normal<br> <i class="fa-icon fa-icon-flag"></i>&nbsp; normal<br>
<i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90<br> <i class="fa-icon fa-icon-flag fa-icon-rotate-90"></i>&nbsp; fa-icon-rotate-90<br>
<i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180<br> <i class="fa-icon fa-icon-flag fa-icon-rotate-180"></i>&nbsp; fa-icon-rotate-180<br>
<i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270<br> <i class="fa-icon fa-icon-flag fa-icon-rotate-270"></i>&nbsp; fa-icon-rotate-270<br>
<i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br> <i class="fa-icon fa-icon-flag fa-icon-flip-horizontal"></i>&nbsp; fa-icon-flip-horizontal<br>
<i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical <i class="fa-icon fa-icon-flag fa-icon-flip-vertical"></i>&nbsp; fa-icon-flip-vertical

View File

@ -1,68 +1,68 @@
<p> <p>
<a href="#"> <a href="#">
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-sign-blank fa-stack-base"></i> <i class="fa-icon fa-icon-sign-blank fa-icon-stack-base"></i>
<i class="fa fa-twitter fa-light"></i> <i class="fa-icon fa-icon-twitter fa-icon-light"></i>
</span> </span>
Twitter Icon Twitter Icon
</a> </a>
<a href="#"> <a href="#">
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-sign-blank fa-stack-base"></i> <i class="fa-icon fa-icon-sign-blank fa-icon-stack-base"></i>
<i class="fa fa-facebook fa-light"></i> <i class="fa-icon fa-icon-facebook fa-icon-light"></i>
</span> </span>
Facebook Icon Facebook Icon
</a> </a>
<a href="#"> <a href="#">
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-sign-blank fa-stack-base"></i> <i class="fa-icon fa-icon-sign-blank fa-icon-stack-base"></i>
<i class="fa fa-github fa-light"></i> <i class="fa-icon fa-icon-github fa-icon-light"></i>
</span> </span>
GitHub Icon GitHub Icon
</a> </a>
</p> </p>
<p> <p>
<a href="#"> <a href="#">
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-circle fa-stack-base"></i> <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i>
<i class="fa fa-twitter fa-light"></i> <i class="fa-icon fa-icon-twitter fa-icon-light"></i>
</span> </span>
Twitter Icon Twitter Icon
</a> </a>
<a href="#"> <a href="#">
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-circle fa-stack-base"></i> <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i>
<i class="fa fa-facebook fa-light"></i> <i class="fa-icon fa-icon-facebook fa-icon-light"></i>
</span> </span>
Facebook Icon Facebook Icon
</a> </a>
<a href="#"> <a href="#">
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-circle fa-stack-base"></i> <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i>
<i class="fa fa-github fa-light"></i> <i class="fa-icon fa-icon-github fa-icon-light"></i>
</span> </span>
GitHub Icon GitHub Icon
</a> </a>
</p> </p>
<p> <p>
<a href="#"> <a href="#">
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-circle-blank fa-stack-base"></i> <i class="fa-icon fa-icon-circle-blank fa-icon-stack-base"></i>
<i class="fa fa-twitter"></i> <i class="fa-icon fa-icon-twitter"></i>
</span> </span>
Twitter Icon Twitter Icon
</a> </a>
<a href="#"> <a href="#">
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-circle-blank fa-stack-base"></i> <i class="fa-icon fa-icon-circle-blank fa-icon-stack-base"></i>
<i class="fa fa-facebook"></i> <i class="fa-icon fa-icon-facebook"></i>
</span> </span>
Facebook Icon Facebook Icon
</a> </a>
<a href="#"> <a href="#">
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-circle-blank fa-stack-base"></i> <i class="fa-icon fa-icon-circle-blank fa-icon-stack-base"></i>
<i class="fa fa-github"></i> <i class="fa-icon fa-icon-github"></i>
</span> </span>
GitHub Icon GitHub Icon
</a> </a>

View File

@ -1,51 +1,51 @@
<p> <p>
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-sign-blank fa-stack-base"></i> <i class="fa-icon fa-icon-sign-blank fa-icon-stack-base"></i>
<i class="fa fa-twitter fa-light"></i> <i class="fa-icon fa-icon-twitter fa-icon-light"></i>
</span> </span>
Twitter Icon Twitter Icon
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-sign-blank fa-stack-base"></i> <i class="fa-icon fa-icon-sign-blank fa-icon-stack-base"></i>
<i class="fa fa-facebook fa-light"></i> <i class="fa-icon fa-icon-facebook fa-icon-light"></i>
</span> </span>
Facebook Icon Facebook Icon
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-sign-blank fa-stack-base"></i> <i class="fa-icon fa-icon-sign-blank fa-icon-stack-base"></i>
<i class="fa fa-github fa-light"></i> <i class="fa-icon fa-icon-github fa-icon-light"></i>
</span> </span>
GitHub Icon GitHub Icon
</p> </p>
<p> <p>
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-circle fa-stack-base"></i> <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i>
<i class="fa fa-twitter fa-light"></i> <i class="fa-icon fa-icon-twitter fa-icon-light"></i>
</span> </span>
Twitter Icon Twitter Icon
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-circle fa-stack-base"></i> <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i>
<i class="fa fa-facebook fa-light"></i> <i class="fa-icon fa-icon-facebook fa-icon-light"></i>
</span> </span>
Facebook Icon Facebook Icon
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-circle fa-stack-base"></i> <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i>
<i class="fa fa-github fa-light"></i> <i class="fa-icon fa-icon-github fa-icon-light"></i>
</span> </span>
GitHub Icon GitHub Icon
</p> </p>
<p> <p>
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-circle-blank fa-stack-base"></i> <i class="fa-icon fa-icon-circle-blank fa-icon-stack-base"></i>
<i class="fa fa-twitter"></i> <i class="fa-icon fa-icon-twitter"></i>
</span> </span>
Twitter Icon Twitter Icon
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-circle-blank fa-stack-base"></i> <i class="fa-icon fa-icon-circle-blank fa-icon-stack-base"></i>
<i class="fa fa-facebook"></i> <i class="fa-icon fa-icon-facebook"></i>
</span> </span>
Facebook Icon Facebook Icon
<span class="fa-stack"> <span class="fa-icon-stack">
<i class="fa fa-circle-blank fa-stack-base"></i> <i class="fa-icon fa-icon-circle-blank fa-icon-stack-base"></i>
<i class="fa fa-github"></i> <i class="fa-icon fa-icon-github"></i>
</span> </span>
GitHub Icon GitHub Icon
</p> </p>

View File

@ -10,27 +10,27 @@
<section id="whats-new" class="feature-list"> <section id="whats-new" class="feature-list">
<div class="row"> <div class="row">
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa fa-compass"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4> <h4><i class="fa-icon fa-icon-compass"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4>
Requested by the active community on the <a href="{{ site.fontawesome.github.url }}">Font Awesome GitHub project</a>. Requested by the active community on the <a href="{{ site.fontawesome.github.url }}">Font Awesome GitHub project</a>.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa fa-terminal"></i> SCSS Support</h4> <h4><i class="fa-icon fa-icon-terminal"></i> SCSS Support</h4>
A long term solution is now in place for SCSS support. Need SASS? Try <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax">sass-convert</a>. A long term solution is now in place for SCSS support. Need SASS? Try <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax">sass-convert</a>.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa fa-legal"></i> <a href="{{ page.relative_path }}license/">Better & Simpler License</a></h4> <h4><i class="fa-icon fa-icon-legal"></i> <a href="{{ page.relative_path }}license/">Better & Simpler License</a></h4>
SIL OFL 1.1 for font, MIT license for code. No more attribution required, but much appreciated. SIL OFL 1.1 for font, MIT license for code. No more attribution required, but much appreciated.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa fa-magic"></i> Pixel Perfection at 14px</h4> <h4><i class="fa-icon fa-icon-magic"></i> Pixel Perfection at 14px</h4>
Version 3 was re-created from the ground up to be razor sharp at Bootstrap's default 14px. Version 3 was re-created from the ground up to be razor sharp at Bootstrap's defa-iconult 14px.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa fa-th-large"></i> <a href="http://icnfnt.com/">Font Subsetting</a></h4> <h4><i class="fa-icon fa-icon-th-large"></i> <a href="http://icnfnt.com/">Font Subsetting</a></h4>
Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and <a href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a href="http://icnfnt.com/">subset</a> to get just the icons you need. Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and <a href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a href="http://icnfnt.com/">subset</a> to get just the icons you need.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa fa-question-sign"></i> Want More Details?</h4> <h4><i class="fa-icon fa-icon-question-sign"></i> Want More Details?</h4>
Check out the <a href="{{ site.fontawesome.github.url }}#changelog">CHANGELOG on the GitHub project</a> to see Check out the <a href="{{ site.fontawesome.github.url }}#changelog">CHANGELOG on the GitHub project</a> to see
what's new and changed. what's new and changed.
</div> </div>

View File

@ -4,7 +4,7 @@ title: The Font Awesome Community
navbar_active: community navbar_active: community
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa fa-thumbs-up-alt fa-lg"></i>&nbsp; Community{% endcapture %} {% capture jumbotron_h1 %}<i class="fa-icon fa-icon-thumbs-up-alt fa-icon-lg"></i>&nbsp; Community{% endcapture %}
{% capture jumbotron_p %}Lots of ways to get involved with Font Awesome{% endcapture %} {% capture jumbotron_p %}Lots of ways to get involved with Font Awesome{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}

View File

@ -4,7 +4,7 @@ title: Font Awesome Examples
navbar_active: examples navbar_active: examples
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa fa-magic fa-lg"></i>&nbsp; Examples{% endcapture %} {% capture jumbotron_h1 %}<i class="fa-icon fa-icon-magic fa-icon-lg"></i>&nbsp; Examples{% endcapture %}
{% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %} {% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}

View File

@ -4,7 +4,7 @@ title: Font Awesome License
navbar_active: license navbar_active: license
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa fa-legal fa-lg"></i>&nbsp; License{% endcapture %} {% capture jumbotron_h1 %}<i class="fa-icon fa-icon-legal fa-icon-lg"></i>&nbsp; License{% endcapture %}
{% capture jumbotron_p %}The full details of how Font Awesome is licensed{% endcapture %} {% capture jumbotron_p %}The full details of how Font Awesome is licensed{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}

View File

@ -11,67 +11,67 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="col-md-3"> <div class="col-md-3">
<div class="well"> <div class="well">
<i class="fa fa-building"></i> Building <i class="fa-icon fa-icon-building"></i> Building
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<div class="well"> <div class="well">
<i class="fa fa-building fa-lg"></i> Building Large <i class="fa-icon fa-icon-building fa-icon-lg"></i> Building Large
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<i class="fa fa-building"></i> Building <i class="fa-icon fa-icon-building"></i> Building
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<i class="fa fa-building fa-lg"></i> Building Large <i class="fa-icon fa-icon-building fa-icon-lg"></i> Building Large
</div> </div>
</div> </div>
<div class="row" style="font-size: 24px; line-height: 1.5em;"> <div class="row" style="font-size: 24px; line-height: 1.5em;">
<div class="col-md-4"> <div class="col-md-4">
<div class="well"> <div class="well">
<i class="fa fa-building"></i> Building <i class="fa-icon fa-icon-building"></i> Building
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="well"> <div class="well">
<i class="fa fa-building fa-lg"></i> Building Large <i class="fa-icon fa-icon-building fa-icon-lg"></i> Building Large
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<i class="fa fa-building fa-lg"></i> Building Large <i class="fa-icon fa-icon-building fa-icon-lg"></i> Building Large
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-3"> <div class="col-md-3">
<div class="well"> <div class="well">
<i class="fa fa-circle"></i> Circle <i class="fa-icon fa-icon-circle"></i> Circle
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<div class="well"> <div class="well">
<i class="fa fa-circle fa-lg"></i> Circle Large <i class="fa-icon fa-icon-circle fa-icon-lg"></i> Circle Large
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<i class="fa fa-circle"></i> Circle <i class="fa-icon fa-icon-circle"></i> Circle
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<i class="fa fa-circle fa-lg"></i> Circle Large <i class="fa-icon fa-icon-circle fa-icon-lg"></i> Circle Large
</div> </div>
</div> </div>
<div class="row" style="font-size: 24px; line-height: 1.5em;"> <div class="row" style="font-size: 24px; line-height: 1.5em;">
<div class="col-md-4"> <div class="col-md-4">
<div class="well"> <div class="well">
<i class="fa fa-circle"></i> Circle <i class="fa-icon fa-icon-circle"></i> Circle
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="well"> <div class="well">
<i class="fa fa-circle fa-lg"></i> Circle Large <i class="fa-icon fa-icon-circle fa-icon-lg"></i> Circle Large
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<i class="fa fa-circle fa-lg"></i> Circle Large <i class="fa-icon fa-icon-circle fa-icon-lg"></i> Circle Large
</div> </div>
</div> </div>
@ -79,42 +79,42 @@ relative_path: ../
<h3>Links with Icons <small>icon should activate link & NOT underline</small></h3> <h3>Links with Icons <small>icon should activate link & NOT underline</small></h3>
<div class="row lead"> <div class="row lead">
<div class="col-md-2"> <div class="col-md-2">
<a href="#"><i class="fa fa-building padding-right"></i>Link Here</a> <a href="#"><i class="fa-icon fa-icon-building padding-right"></i>Link Here</a>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<a href="#"><i class="fa fa-building fa-lg padding-right"></i>Link Here</a> <a href="#"><i class="fa-icon fa-icon-building fa-icon-lg padding-right"></i>Link Here</a>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<a href="#"><i class="fa fa-caret-down padding-right"></i>Link Here</a> <a href="#"><i class="fa-icon fa-icon-caret-down padding-right"></i>Link Here</a>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<a href="#">Link Here<i class="fa fa-double-angle-right padding-left"></i></a> <a href="#">Link Here<i class="fa-icon fa-icon-double-angle-right padding-left"></i></a>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left"></i></a> <a href="#">Link Here<i class="fa-icon fa-icon-double-angle-right fa-icon-lg padding-left"></i></a>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<a href="#">Link Here<i class="fa fa-caret-down padding-left"></i></a> <a href="#">Link Here<i class="fa-icon fa-icon-caret-down padding-left"></i></a>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-2"> <div class="col-md-2">
<a href="#"><i class="fa fa-building padding-right-sm"></i>Link Here</a> <a href="#"><i class="fa-icon fa-icon-building padding-right-sm"></i>Link Here</a>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<a href="#"><i class="fa fa-building fa-lg padding-right-sm"></i>Link Here</a> <a href="#"><i class="fa-icon fa-icon-building fa-icon-lg padding-right-sm"></i>Link Here</a>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<a href="#"><i class="fa fa-caret-down padding-right-sm"></i>Link Here</a> <a href="#"><i class="fa-icon fa-icon-caret-down padding-right-sm"></i>Link Here</a>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<a href="#">Link Here<i class="fa fa-double-angle-right padding-left-sm"></i></a> <a href="#">Link Here<i class="fa-icon fa-icon-double-angle-right padding-left-sm"></i></a>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left-sm"></i></a> <a href="#">Link Here<i class="fa-icon fa-icon-double-angle-right fa-icon-lg padding-left-sm"></i></a>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<a href="#">Link Here<i class="fa fa-caret-down padding-left-sm"></i></a> <a href="#">Link Here<i class="fa-icon fa-icon-caret-down padding-left-sm"></i></a>
</div> </div>
</div> </div>
@ -122,23 +122,23 @@ relative_path: ../
<h3>Navbar <small>should stay same height </small></h3> <h3>Navbar <small>should stay same height </small></h3>
<div class="navbar navbar-inverse navbar-static-top"> <div class="navbar navbar-inverse navbar-static-top">
<div class="container"> <div class="container">
<a class="navbar-brand" href="#"><i class="fa fa-flag"></i> Font Awesome</a> <a class="navbar-brand" href="#"><i class="fa-icon fa-icon-flag"></i> Font Awesome</a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li> <li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li>
<li class="dropdown" style="border: solid 1px white;"> <li class="dropdown" style="border: solid 1px white;">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 2 Nav Item 2
<i class="fa fa-caret-down"></i> <i class="fa-icon fa-icon-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa-icon fa-icon-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li> <li><a href="#"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li>
</ul> </ul>
</li> </li>
<li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-building fa-lg"></i> Nav Item 3</a></li> <li style="border: solid 1px white;"><a href="#examples"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Nav Item 3</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-envelope"></i> Nav Item 4</a></li> <li style="border: solid 1px white;"><a href="#examples"><i class="fa-icon fa-icon-envelope"></i> Nav Item 4</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle fa-lg"></i> Nav Item 5</a></li> <li style="border: solid 1px white;"><a href="#examples"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Nav Item 5</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 6</a></li> <li style="border: solid 1px white;"><a href="#examples"><i class="fa-icon fa-icon-circle"></i> Nav Item 6</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -151,23 +151,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<button class="btn btn-default btn-xs">Button</button> <button class="btn btn-default btn-xs">Button</button>
<button class="btn btn-default btn-xs"><i class="fa fa-building"></i> Button</button> <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building"></i> Button</button>
<button class="btn btn-default btn-xs"><i class="fa fa-building"></i></button> <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-default btn-sm">Button</button> <button class="btn btn-default btn-sm">Button</button>
<button class="btn btn-default btn-sm"><i class="fa fa-building"></i> Button</button> <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building"></i> Button</button>
<button class="btn btn-default btn-sm"><i class="fa fa-building"></i></button> <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-default">Button</button> <button class="btn btn-default">Button</button>
<button class="btn btn-default"><i class="fa fa-building"></i> Button</button> <button class="btn btn-default"><i class="fa-icon fa-icon-building"></i> Button</button>
<button class="btn btn-default"><i class="fa fa-building"></i></button> <button class="btn btn-default"><i class="fa-icon fa-icon-building"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-default btn-lg">Button</button> <button class="btn btn-default btn-lg">Button</button>
<button class="btn btn-default btn-lg"><i class="fa fa-building"></i> Button</button> <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building"></i> Button</button>
<button class="btn btn-default btn-lg"><i class="fa fa-building"></i></button> <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -175,23 +175,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<button class="btn btn-default btn-xs">Button</button> <button class="btn btn-default btn-xs">Button</button>
<button class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i> Button</button> <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</button>
<button class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i></button> <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building fa-icon-lg"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-default btn-sm">Button</button> <button class="btn btn-default btn-sm">Button</button>
<button class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i> Button</button> <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</button>
<button class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i></button> <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building fa-icon-lg"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-default">Button</button> <button class="btn btn-default">Button</button>
<button class="btn btn-default"><i class="fa fa-building fa-lg"></i> Button</button> <button class="btn btn-default"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</button>
<button class="btn btn-default"><i class="fa fa-building fa-lg"></i></button> <button class="btn btn-default"><i class="fa-icon fa-icon-building fa-icon-lg"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-default btn-lg">Button</button> <button class="btn btn-default btn-lg">Button</button>
<button class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i> Button</button> <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</button>
<button class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i></button> <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building fa-icon-lg"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -201,23 +201,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<button class="btn btn-default btn-xs">Button</button> <button class="btn btn-default btn-xs">Button</button>
<button class="btn btn-default btn-xs"><i class="fa fa-circle"></i> Button</button> <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle"></i> Button</button>
<button class="btn btn-default btn-xs"><i class="fa fa-circle"></i></button> <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-default btn-sm">Button</button> <button class="btn btn-default btn-sm">Button</button>
<button class="btn btn-default btn-sm"><i class="fa fa-circle"></i> Button</button> <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle"></i> Button</button>
<button class="btn btn-default btn-sm"><i class="fa fa-circle"></i></button> <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-default">Button</button> <button class="btn btn-default">Button</button>
<button class="btn btn-default"><i class="fa fa-circle"></i> Button</button> <button class="btn btn-default"><i class="fa-icon fa-icon-circle"></i> Button</button>
<button class="btn btn-default"><i class="fa fa-circle"></i></button> <button class="btn btn-default"><i class="fa-icon fa-icon-circle"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-default btn-lg">Button</button> <button class="btn btn-default btn-lg">Button</button>
<button class="btn btn-default btn-lg"><i class="fa fa-circle"></i> Button</button> <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle"></i> Button</button>
<button class="btn btn-default btn-lg"><i class="fa fa-circle"></i></button> <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -225,23 +225,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<button class="btn btn-default btn-xs">Button</button> <button class="btn btn-default btn-xs">Button</button>
<button class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i> Button</button> <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</button>
<button class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i></button> <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-default btn-sm">Button</button> <button class="btn btn-default btn-sm">Button</button>
<button class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i> Button</button> <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</button>
<button class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i></button> <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-default">Button</button> <button class="btn btn-default">Button</button>
<button class="btn btn-default"><i class="fa fa-circle fa-lg"></i> Button</button> <button class="btn btn-default"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</button>
<button class="btn btn-default"><i class="fa fa-circle fa-lg"></i></button> <button class="btn btn-default"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></button>
</div> </div>
<div> <div>
<button class="btn btn-default btn-lg">Button</button> <button class="btn btn-default btn-lg">Button</button>
<button class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i> Button</button> <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</button>
<button class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i></button> <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -254,23 +254,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<a class="btn btn-default btn-xs">Button</a> <a class="btn btn-default btn-xs">Button</a>
<a class="btn btn-default btn-xs"><i class="fa fa-building"></i> Button</a> <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building"></i> Button</a>
<a class="btn btn-default btn-xs"><i class="fa fa-building"></i></a> <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-default btn-sm">Button</a> <a class="btn btn-default btn-sm">Button</a>
<a class="btn btn-default btn-sm"><i class="fa fa-building"></i> Button</a> <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building"></i> Button</a>
<a class="btn btn-default btn-sm"><i class="fa fa-building"></i></a> <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-default">Button</a> <a class="btn btn-default">Button</a>
<a class="btn btn-default"><i class="fa fa-building"></i> Button</a> <a class="btn btn-default"><i class="fa-icon fa-icon-building"></i> Button</a>
<a class="btn btn-default"><i class="fa fa-building"></i></a> <a class="btn btn-default"><i class="fa-icon fa-icon-building"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-default btn-lg">Button</a> <a class="btn btn-default btn-lg">Button</a>
<a class="btn btn-default btn-lg"><i class="fa fa-building"></i> Button</a> <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building"></i> Button</a>
<a class="btn btn-default btn-lg"><i class="fa fa-building"></i></a> <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building"></i></a>
</div> </div>
</div> </div>
</div> </div>
@ -278,23 +278,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<a class="btn btn-default btn-xs">Button</a> <a class="btn btn-default btn-xs">Button</a>
<a class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i> Button</a> <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</a>
<a class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i></a> <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building fa-icon-lg"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-default btn-sm">Button</a> <a class="btn btn-default btn-sm">Button</a>
<a class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i> Button</a> <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</a>
<a class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i></a> <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building fa-icon-lg"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-default">Button</a> <a class="btn btn-default">Button</a>
<a class="btn btn-default"><i class="fa fa-building fa-lg"></i> Button</a> <a class="btn btn-default"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</a>
<a class="btn btn-default"><i class="fa fa-building fa-lg"></i></a> <a class="btn btn-default"><i class="fa-icon fa-icon-building fa-icon-lg"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-default btn-lg">Button</a> <a class="btn btn-default btn-lg">Button</a>
<a class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i> Button</a> <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</a>
<a class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i></a> <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building fa-icon-lg"></i></a>
</div> </div>
</div> </div>
</div> </div>
@ -304,23 +304,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<a class="btn btn-default btn-xs">Button</a> <a class="btn btn-default btn-xs">Button</a>
<a class="btn btn-default btn-xs"><i class="fa fa-circle"></i> Button</a> <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle"></i> Button</a>
<a class="btn btn-default btn-xs"><i class="fa fa-circle"></i></a> <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-default btn-sm">Button</a> <a class="btn btn-default btn-sm">Button</a>
<a class="btn btn-default btn-sm"><i class="fa fa-circle"></i> Button</a> <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle"></i> Button</a>
<a class="btn btn-default btn-sm"><i class="fa fa-circle"></i></a> <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-default">Button</a> <a class="btn btn-default">Button</a>
<a class="btn btn-default"><i class="fa fa-circle"></i> Button</a> <a class="btn btn-default"><i class="fa-icon fa-icon-circle"></i> Button</a>
<a class="btn btn-default"><i class="fa fa-circle"></i></a> <a class="btn btn-default"><i class="fa-icon fa-icon-circle"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-default btn-lg">Button</a> <a class="btn btn-default btn-lg">Button</a>
<a class="btn btn-default btn-lg"><i class="fa fa-circle"></i> Button</a> <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle"></i> Button</a>
<a class="btn btn-default btn-lg"><i class="fa fa-circle"></i></a> <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle"></i></a>
</div> </div>
</div> </div>
</div> </div>
@ -328,23 +328,23 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3; text-align: center;"> <div style="border: solid 1px #d3d3d3; text-align: center;">
<div> <div>
<a class="btn btn-default btn-xs">Button</a> <a class="btn btn-default btn-xs">Button</a>
<a class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i> Button</a> <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</a>
<a class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i></a> <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-default btn-sm">Button</a> <a class="btn btn-default btn-sm">Button</a>
<a class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i> Button</a> <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</a>
<a class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i></a> <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-default">Button</a> <a class="btn btn-default">Button</a>
<a class="btn btn-default"><i class="fa fa-circle fa-lg"></i> Button</a> <a class="btn btn-default"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</a>
<a class="btn btn-default"><i class="fa fa-circle fa-lg"></i></a> <a class="btn btn-default"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></a>
</div> </div>
<div> <div>
<a class="btn btn-default btn-lg">Button</a> <a class="btn btn-default btn-lg">Button</a>
<a class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i> Button</a> <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</a>
<a class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i></a> <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></a>
</div> </div>
</div> </div>
</div> </div>
@ -356,7 +356,7 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default btn-lg"> <button class="btn btn-default btn-lg">
<i class="fa fa-adjust"></i> <i class="fa-icon fa-icon-adjust"></i>
</button> </button>
<button class="btn btn-default btn-lg"> <button class="btn btn-default btn-lg">
Text Text
@ -368,7 +368,7 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default"> <button class="btn btn-default">
<i class="fa fa-adjust"></i> <i class="fa-icon fa-icon-adjust"></i>
</button> </button>
<button class="btn btn-default"> <button class="btn btn-default">
Text Text
@ -380,7 +380,7 @@ relative_path: ../
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-default btn-sm"> <button class="btn btn-default btn-sm">
<i class="fa fa-adjust"></i> <i class="fa-icon fa-icon-adjust"></i>
</button> </button>
<button class="btn btn-default btn-sm"> <button class="btn btn-default btn-sm">
Text Text
@ -395,7 +395,7 @@ relative_path: ../
<div class="col-md-4"> <div class="col-md-4">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<a class="btn btn-default btn-lg" href="#"> <a class="btn btn-default btn-lg" href="#">
<i class="fa fa-github fa-2x pull-left"></i> <i class="fa-icon fa-icon-github fa-icon-2x pull-left"></i>
Longer<br>Button</a> Longer<br>Button</a>
<a class="btn btn-default btn-lg" href="#"> <a class="btn btn-default btn-lg" href="#">
Longer<br>Button</a> Longer<br>Button</a>
@ -404,7 +404,7 @@ relative_path: ../
<div class="col-md-4"> <div class="col-md-4">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<a class="btn btn-default" href="#"> <a class="btn btn-default" href="#">
<i class="fa fa-github fa-2x pull-left"></i> <i class="fa-icon fa-icon-github fa-icon-2x pull-left"></i>
Longer<br>Button</a> Longer<br>Button</a>
<a class="btn btn-default" href="#"> <a class="btn btn-default" href="#">
Longer<br>Button</a> Longer<br>Button</a>
@ -413,7 +413,7 @@ relative_path: ../
<div class="col-md-4"> <div class="col-md-4">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<a class="btn btn-default btn-sm" href="#"> <a class="btn btn-default btn-sm" href="#">
<i class="fa fa-github fa-2x pull-left"></i> <i class="fa-icon fa-icon-github fa-icon-2x pull-left"></i>
Longer<br>Button</a> Longer<br>Button</a>
<a class="btn btn-default btn-sm" href="#"> <a class="btn btn-default btn-sm" href="#">
Longer<br>Button</a> Longer<br>Button</a>
@ -430,63 +430,63 @@ relative_path: ../
<li class="dropdown active"> <li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 2 Nav Item 2
<i class="fa fa-caret-down"></i> <i class="fa-icon fa-icon-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa-icon fa-icon-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li> <li><a href="#"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown active"> <li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 3 Nav Item 3
<i class="fa fa-caret-down"></i> <i class="fa-icon fa-icon-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa-icon fa-icon-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li> <li><a href="#"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li>
</ul> </ul>
</li> </li>
<li class="active"><a href="#examples"><i class="fa fa-building fa-lg"></i> Nav Item 4</a></li> <li class="active"><a href="#examples"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Nav Item 4</a></li>
<li class="active"><a href="#examples"><i class="fa fa-spinner fa-spin"></i> Nav Item 5</a></li> <li class="active"><a href="#examples"><i class="fa-icon fa-icon-spinner fa-icon-spin"></i> Nav Item 5</a></li>
<li class="active"><a href="#examples"><i class="fa fa-circle fa-lg"></i> Nav Item 6</a></li> <li class="active"><a href="#examples"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Nav Item 6</a></li>
<li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li> <li class="active"><a href="#examples"><i class="fa-icon fa-icon-circle"></i> Nav Item 7</a></li>
</ul> </ul>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a href="#">Nav Item 1</a></li> <li class="active"><a href="#">Nav Item 1</a></li>
<li class="dropdown active"> <li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 2 Nav Item 2
<i class="fa fa-caret-down"></i> <i class="fa-icon fa-icon-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa-icon fa-icon-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li> <li><a href="#"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown active"> <li class="dropdown active">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Nav Item 3 Nav Item 3
<i class="fa fa-caret-down"></i> <i class="fa-icon fa-icon-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa-icon fa-icon-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li> <li><a href="#"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li>
</ul> </ul>
</li> </li>
<li class="active"><a href="#examples"><i class="fa fa-building fa-lg"></i> Nav Item 4</a></li> <li class="active"><a href="#examples"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Nav Item 4</a></li>
<li class="active"><a href="#examples"><i class="fa fa-spinner fa-spin"></i> Nav Item 5</a></li> <li class="active"><a href="#examples"><i class="fa-icon fa-icon-spinner fa-icon-spin"></i> Nav Item 5</a></li>
<li class="active"><a href="#examples"><i class="fa fa-circle fa-lg"></i> Nav Item 6</a></li> <li class="active"><a href="#examples"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Nav Item 6</a></li>
<li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li> <li class="active"><a href="#examples"><i class="fa-icon fa-icon-circle"></i> Nav Item 7</a></li>
</ul> </ul>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<div class="list-group"> <div class="list-group">
<a href="#" class="list-group-item active"> <a href="#" class="list-group-item active">
Overview<i class="fa fa-chevron-right fa-fixed-width pull-right"></i> Overview<i class="fa-icon fa-icon-chevron-right fa-icon-fixed-width pull-right"></i>
</a> </a>
<a href="#" class="list-group-item"> <a href="#" class="list-group-item">
Overview<i class="fa fa-chevron-right fa-fixed-width pull-right"></i> Overview<i class="fa-icon fa-icon-chevron-right fa-icon-fixed-width pull-right"></i>
</a> </a>
</div> </div>
</div> </div>
@ -496,11 +496,11 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="well"> <div class="well">
<i class="hide fa fa-circle"></i> Icon should be hidden <i class="hide fa-icon fa-icon-circle"></i> Icon should be hidden
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<i class="hide fa fa-circle"></i> Icon should be hidden <i class="hide fa-icon fa-icon-circle"></i> Icon should be hidden
</div> </div>
</div> </div>
@ -509,28 +509,28 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<p class="lead"> <p class="lead">
<i class="fa fa-stethoscope fa-3x pull-left fa-border"></i> <i class="fa-icon fa-icon-stethoscope fa-icon-3x pull-left fa-icon-border"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
</p> </p>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<p class="lead"> <p class="lead">
<i class="fa fa-ambulance fa-4x pull-right fa-border"></i> <i class="fa-icon fa-icon-ambulance fa-icon-4x pull-right fa-icon-border"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
</p> </p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<i class="fa fa-building fa-2x pull-left fa-border"></i> <i class="fa-icon fa-icon-building fa-icon-2x pull-left fa-icon-border"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<i class="fa fa-stethoscope fa-3x pull-right fa-border"></i> <i class="fa-icon fa-icon-stethoscope fa-icon-3x pull-right fa-icon-border"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<i class="fa fa-ambulance fa-4x pull-left"></i> <i class="fa-icon fa-icon-ambulance fa-icon-4x pull-left"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
</div> </div>
</div> </div>
@ -540,12 +540,12 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul"> <ul class="fa-icon-ul">
<li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-icon-li fa-icon fa-icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-icon-li fa-icon fa-icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <li><i class="fa-icon-li fa-icon fa-icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa fa-building"></i> <i class="fa-icon fa-icon-building"></i>
<span class="label label-default">foo</span> <span class="label label-defa-iconult">foo</span>
<a class="btn btn-default btn-xs">foo</a> <a class="btn btn-default btn-xs">foo</a>
</li> </li>
</ul> </ul>
@ -553,10 +553,10 @@ relative_path: ../
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul"> <ul class="fa-icon-ul">
<li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-icon-li fa-icon fa-icon-double-angle-right fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-arrow-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-icon-li fa-icon fa-icon-arrow-right fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="fa-li fa fa-building fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-icon-li fa-icon fa-icon-building fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -564,19 +564,19 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul lead"> <ul class="fa-icon-ul lead">
<li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-icon-li fa-icon fa-icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-icon-li fa-icon fa-icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-icon-li fa-icon fa-icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul lead"> <ul class="fa-icon-ul lead">
<li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-icon-li fa-icon fa-icon-double-angle-right fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-arrow-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-icon-li fa-icon fa-icon-arrow-right fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="fa-li fa fa-building fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-icon-li fa-icon fa-icon-building fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -584,19 +584,19 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul"> <ul class="fa-icon-ul">
<li><a href="#"><i class="fa-li fa fa-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-icon-li fa-icon fa-icon-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><a href="#"><i class="fa-li fa fa-arrow-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><a href="#"><i class="fa-icon-li fa-icon fa-icon-arrow-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><a href="#"><i class="fa-li fa fa-building"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-icon-li fa-icon fa-icon-building"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul"> <ul class="fa-icon-ul">
<li><a href="#"><i class="fa-li fa fa-double-angle-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-icon-li fa-icon fa-icon-double-angle-right fa-icon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><a href="#"><i class="fa-li fa fa-arrow-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><a href="#"><i class="fa-icon-li fa-icon fa-icon-arrow-right fa-icon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><a href="#"><i class="fa-li fa fa-building fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-icon-li fa-icon fa-icon-building fa-icon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -604,12 +604,12 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul"> <ul class="fa-icon-ul">
<li><i class="fa-li fa fa-refresh fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-icon-li fa-icon fa-icon-refresh fa-icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-icon-li fa-icon fa-icon-spinner fa-icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <li><i class="fa-icon-li fa-icon fa-icon-spinner fa-icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa fa-building"></i> <i class="fa-icon fa-icon-building"></i>
<span class="label label-default">foo</span> <span class="label label-defa-iconult">foo</span>
<a class="btn btn-default btn-xs">foo</a> <a class="btn btn-default btn-xs">foo</a>
</li> </li>
</ul> </ul>
@ -617,12 +617,12 @@ relative_path: ../
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<ul class="fa-ul"> <ul class="fa-icon-ul">
<li><i class="fa-li fa fa-refresh fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-icon-li fa-icon fa-icon-refresh fa-icon-spin fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="fa-li fa fa-spinner fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> <li><i class="fa-icon-li fa-icon fa-icon-spinner fa-icon-spin fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
<li><i class="fa-li fa fa-spinner fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <li><i class="fa-icon-li fa-icon fa-icon-spinner fa-icon-spin fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa fa-building"></i> <i class="fa-icon fa-icon-building"></i>
<span class="label label-default">foo</span> <span class="label label-defa-iconult">foo</span>
<a class="btn btn-default btn-xs">foo</a> <a class="btn btn-default btn-xs">foo</a>
</li> </li>
</ul> </ul>
@ -655,61 +655,61 @@ relative_path: ../
<h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3> <h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa fa-refresh fa-spin"></i> Loading... <i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading...
<button class="btn btn-default btn-sm"><i class="fa fa-refresh fa-spin"></i> Loading...</button> <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading...</button>
<button class="btn btn-default btn-sm">Loading...</button> <button class="btn btn-default btn-sm">Loading...</button>
<i class="fa fa-circle-blank fa-spin"></i> Loading... <i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...
<button class="btn btn-default btn-sm"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button> <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...</button>
<a href="#"><i class="fa fa-refresh fa-spin"></i> Loading...</a> <a href="#"><i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading...</a>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa fa-refresh fa-spin"></i> Loading... <i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading...
<button class="btn btn-default"><i class="fa fa-refresh fa-spin"></i> Loading...</button> <button class="btn btn-default"><i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading...</button>
<button class="btn btn-default">Loading...</button> <button class="btn btn-default">Loading...</button>
<i class="fa fa-circle-blank fa-spin"></i> Loading... <i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...
<button class="btn btn-default"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button> <button class="btn btn-default"><i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...</button>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa fa-spinner fa-spin"></i> Loading... <i class="fa-icon fa-icon-spinner fa-icon-spin"></i> Loading...
<button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i> Loading...</button> <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-spinner fa-icon-spin"></i> Loading...</button>
<button class="btn btn-default btn-lg">Loading...</button> <button class="btn btn-default btn-lg">Loading...</button>
<i class="fa fa-circle-blank fa-spin"></i> Loading... <i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...
<button class="btn btn-default btn-lg"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button> <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...</button>
</div> </div>
<h4>fa-lg</h4> <h4>fa-icon-lg</h4>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa fa-refresh fa-lg fa-spin"></i> Loading... <i class="fa-icon fa-icon-refresh fa-icon-lg fa-icon-spin"></i> Loading...
<button class="btn btn-default btn-sm"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button> <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-refresh fa-icon-lg fa-icon-spin"></i> Loading...</button>
<button class="btn btn-default btn-sm">Loading...</button> <button class="btn btn-default btn-sm">Loading...</button>
<i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading... <i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...
<button class="btn btn-default btn-sm"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button> <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...</button>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa fa-refresh fa-lg fa-spin"></i> Loading... <i class="fa-icon fa-icon-refresh fa-icon-lg fa-icon-spin"></i> Loading...
<button class="btn btn-default"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button> <button class="btn btn-default"><i class="fa-icon fa-icon-refresh fa-icon-lg fa-icon-spin"></i> Loading...</button>
<button class="btn btn-default">Loading...</button> <button class="btn btn-default">Loading...</button>
<i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading... <i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...
<button class="btn btn-default"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button> <button class="btn btn-default"><i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...</button>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa fa-spinner fa-lg fa-spin"></i> Loading... <i class="fa-icon fa-icon-spinner fa-icon-lg fa-icon-spin"></i> Loading...
<button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-lg fa-spin"></i> Loading...</button> <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-spinner fa-icon-lg fa-icon-spin"></i> Loading...</button>
<button class="btn btn-default btn-lg">Loading...</button> <button class="btn btn-default btn-lg">Loading...</button>
<i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading... <i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...
<button class="btn btn-default btn-lg"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button> <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...</button>
</div> </div>
<h4>Bootstrap Prepend and Append</h4> <h4>Bootstrap Prepend and Append</h4>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon"><i class="fa fa-spinner fa-spin"></i></span> <span class="input-group-addon"><i class="fa-icon fa-icon-spinner fa-icon-spin"></i></span>
<input type="text" class="form-control" placeholder="Username"> <input type="text" class="form-control" placeholder="Username">
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control"> <input type="text" class="form-control">
<span class="input-group-addon"><i class="fa fa-spinner fa-spin"></i></span> <span class="input-group-addon"><i class="fa-icon fa-icon-spinner fa-icon-spin"></i></span>
</div> </div>
</div> </div>
</div> </div>

View File

@ -4,7 +4,7 @@ title: What's New
navbar_active: whats-new navbar_active: whats-new
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa fa-lightbulb fa-lg"></i>&nbsp; What's New{% endcapture %} {% capture jumbotron_h1 %}<i class="fa-icon fa-icon-lightbulb fa-icon-lg"></i>&nbsp; What's New{% endcapture %}
{% capture jumbotron_p %}What's New in the latest version &mdash; Font Awesome {{ site.fontawesome.minor_version }}{% endcapture %} {% capture jumbotron_p %}What's New in the latest version &mdash; Font Awesome {{ site.fontawesome.minor_version }}{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}