FlandreScarle7/Fork-Awesome
1
0
Fork 0
mirror of https://github.com/ForkAwesome/Fork-Awesome.git synced 2024-12-26 21:41:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

doc changes to match new default icon class fa

Browse Source
This commit is contained in:
davegandy 2013-10-20 19:12:13 -04:00
parent b52bb9b9b4
commit c5a0e918a4
53 changed files with 578 additions and 578 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_config.yml
View File

@ -26,7 +26,7 @@ fontawesome:
blog_url: http://blog.fontawesome.io blog_url: http://blog.fontawesome.io
twitter: fontawesome twitter: fontawesome
tagline: The iconic font designed for Bootstrap tagline: The iconic font designed for Bootstrap
css_prefix: fa-icon css_prefix: fa
author: author:
name: Dave Gandy name: Dave Gandy
email: dave@fontawesome.io email: dave@fontawesome.io

2
less/variables.less
View File

@ -1,9 +1,9 @@
// Variables // Variables
// -------------------------- // --------------------------
@fa-css-prefix: fa-icon;
@fa-font-path: "../fonts"; @fa-font-path: "../fonts";
//@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.0.0/font"; // for referencing Bootstrap CDN font files directly //@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.0.0/font"; // for referencing Bootstrap CDN font files directly
@fa-css-prefix: fa;
@fa-version: "4.0.0"; @fa-version: "4.0.0";
@fa-border-color: #eee; @fa-border-color: #eee;
@fa-icon-muted: #eee; @fa-icon-muted: #eee;

2
scss/_variables.scss
View File

@ -1,9 +1,9 @@
// Variables // Variables
// -------------------------- // --------------------------
$fa-css-prefix: fa;
$fa-font-path: "../fonts" !default; $fa-font-path: "../fonts" !default;
//$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.0.0/font" !default; // for referencing Bootstrap CDN font files directly //$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.0.0/font" !default; // for referencing Bootstrap CDN font files directly
$fa-css-prefix: fa;
$fa-version: "4.0.0" !default; $fa-version: "4.0.0" !default;
$fa-border-color: #eee !default; $fa-border-color: #eee !default;
$fa-icon-muted: #eee !default; $fa-icon-muted: #eee !default;

2
src/_includes/community/requesting-new-icons.html
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-icon fa-icon-smile"></i> to represent happiness. It's easier to make a smiley face. <i class="fa fa-smile"></i>
</li> </li>
</ol> </ol>
</section> </section>

16
src/_includes/examples/animated-spinner.html
View File

@ -3,24 +3,24 @@
<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 the <code>fa-icon-spin</code> class to get any icon to rotate. Works well with <code>fa-icon-spinner</code>, Use the <code>fa-spin</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>,
<code>fa-icon-refresh</code>, and <code>fa-icon-cog</code>. <code>fa-refresh</code>, and <code>fa-cog</code>.
</p> </p>
<p> <p>
<button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-spinner fa-icon-spin"></i></button> <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-refresh fa-icon-spin"></i></button> <button class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button>
<button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-cog fa-icon-spin"></i></button> <button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button>
</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 lead"> <div class="well well-large well-transparent lead">
<i class="fa-icon fa-icon-spinner fa-icon-spin fa-icon-lg"></i> Spinner icon when loading content... <i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content...
</div> </div>
{% highlight html %} {% highlight html %}
<i class="fa-icon fa-icon-spinner fa-icon-spin fa-icon-lg"></i> Spinner icon when loading content... <i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content...
{% endhighlight %} {% endhighlight %}
<p class="alert alert-success"> <p class="alert alert-success">
<i class="fa-icon fa-icon-info-circle"></i> CSS3 animations aren't supported in IE8 - IE9. <i class="fa fa-info-circle"></i> CSS3 animations aren't supported in IE8 - IE9.
</p> </p>
</div> </div>
</div> </div>

10
src/_includes/examples/bordered-pulled.html
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-icon-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or Use <code>fa-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-icon fa-icon-quote-left fa-icon-4x pull-left fa-icon-muted"></i> <i class="fa fa-quote-left fa-4x pull-left fa-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-icon fa-icon-quote-left fa-icon-4x pull-left fa-icon-muted"></i> <i class="fa fa-quote-left fa-4x pull-left fa-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-icon fa-icon-flag fa-icon-4x pull-left fa-icon-border"></i> <i class="fa fa-flag fa-4x pull-left fa-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-icon fa-icon-flag fa-icon-4x pull-left fa-icon-border"></i> <i class="fa fa-flag fa-4x pull-left fa-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>

22
src/_includes/examples/button-dropdowns.html
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-success" href="#"><i class="fa-icon fa-icon-user"></i> User</a> <a class="btn btn-success" href="#"><i class="fa fa-user"></i> User</a>
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"> <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa-icon fa-icon-caret-down"></span></a> <span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<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-pencil fa-fixed-width"></i> Edit</a></li>
<li><a href="#"><i class="fa-icon fa-icon-trash-alt fa-icon-fixed-width"></i> Delete</a></li> <li><a href="#"><i class="fa fa-trash-alt fa-fixed-width"></i> Delete</a></li>
<li><a href="#"><i class="fa-icon fa-icon-ban fa-icon-fixed-width"></i> Ban</a></li> <li><a href="#"><i class="fa fa-ban fa-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-success" href="#"><i class="fa-icon fa-icon-user"></i> User</a> <a class="btn btn-success" href="#"><i class="fa fa-user"></i> User</a>
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"> <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa-icon fa-icon-caret-down"></span></a> <span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<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-pencil fa-fixed-width"></i> Edit</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-trash fa-fixed-width"></i> Delete</a></li>
<li><a href="#"><i class="fa-icon fa-icon-ban fa-icon-fixed-width"></i> Ban</a></li> <li><a href="#"><i class="fa fa-ban fa-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-success"><i class="fa-icon fa-icon-info-circle"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div> <div class="alert alert-success"><i class="fa fa-info-circle"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div>
</div> </div>
</div> </div>
</section> </section>

16
src/_includes/examples/button-groups.html
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-icon fa-icon-align-left"></i></a> <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-center"></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-right"></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-justify"></i></a> <a class="btn btn-default" href="#"><i class="fa fa-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-icon fa-icon-align-left"></i></a> <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-center"></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-right"></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-justify"></i></a> <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div> </div>
{% endhighlight %} {% endhighlight %}
</div> </div>

34
src/_includes/examples/buttons.html
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-icon fa-icon-repeat"></i> Reload</a> <i class="fa fa-repeat"></i> Reload</a>
<a class="btn btn-success" href="#"> <a class="btn btn-success" href="#">
<i class="fa-icon fa-icon-shopping-cart fa-icon-lg"></i> Checkout</a> <i class="fa fa-shopping-cart fa-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-icon fa-icon-comment"></i> Comment</a> <i class="fa fa-comment"></i> Comment</a>
<a class="btn btn-sm btn-info" href="#"> <a class="btn btn-sm btn-info" href="#">
<i class="fa-icon fa-icon-info-circle"></i> Info</a> <i class="fa fa-info-circle"></i> Info</a>
</p> </p>
<p> <p>
<a class="btn btn-danger" href="#"> <a class="btn btn-danger" href="#">
<i class="fa-icon fa-icon-trash fa-icon-lg"></i> Delete</a> <i class="fa fa-trash fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#"> <a class="btn btn-default btn-sm" href="#">
<i class="fa-icon fa-icon-cog"></i> Settings</a> <i class="fa fa-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-icon fa-icon-flag fa-icon-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
</p> </p>
<p> <p>
<a class="btn btn-warning" href="#"> <a class="btn btn-warning" href="#">
<i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Synchronizing Content...</a> <i class="fa fa-refresh fa-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-icon-spin</code>. <code>pull-right</code> and <code>pull-left</code>, and <code>fa-spin</code>.
</p> </p>
{% highlight html %} {% highlight html %}
<a class="btn btn-default" href="#"> <a class="btn btn-default" href="#">
<i class="fa-icon fa-icon-repeat"></i> Reload</a> <i class="fa fa-repeat"></i> Reload</a>
<a class="btn btn-success" href="#"> <a class="btn btn-success" href="#">
<i class="fa-icon fa-icon-shopping-cart fa-icon-lg"></i> Checkout</a> <i class="fa fa-shopping-cart fa-lg"></i> Checkout</a>
<a class="btn btn-lg btn-primary" href="#"> <a class="btn btn-lg btn-primary" href="#">
<i class="fa-icon fa-icon-comment"></i> Comment</a> <i class="fa fa-comment"></i> Comment</a>
<a class="btn btn-sm btn-info" href="#"> <a class="btn btn-sm btn-info" href="#">
<i class="fa-icon fa-icon-info-circle"></i> Info</a> <i class="fa fa-info-circle"></i> Info</a>
<a class="btn btn-danger" href="#"> <a class="btn btn-danger" href="#">
<i class="fa-icon fa-icon-trash fa-icon-lg"></i> Delete</a> <i class="fa fa-trash fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#"> <a class="btn btn-default btn-sm" href="#">
<i class="fa-icon fa-icon-cog"></i> Settings</a> <i class="fa fa-cog"></i> Settings</a>
<a class="btn btn-lg btn-danger" href="#"> <a class="btn btn-lg btn-danger" href="#">
<i class="fa-icon fa-icon-flag fa-icon-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
<a class="btn btn-warning" href="#"> <a class="btn btn-warning" href="#">
<i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Synchronizing Content...</a> <i class="fa fa-refresh fa-spin"></i> Synchronizing Content...</a>
{% endhighlight %} {% endhighlight %}
</div> </div>
</div> </div>

8
src/_includes/examples/form-inputs.html
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-icon fa-icon-envelope-alt"></i></span> <span class="input-group-addon"><i class="fa fa-envelope-alt"></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-icon fa-icon-key"></i></span> <span class="input-group-addon"><i class="fa fa-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-icon fa-icon-envelope-alt"></i></span> <span class="add-on"><i class="fa fa-envelope-alt"></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-icon fa-icon-key"></i></span> <span class="add-on"><i class="fa fa-key"></i></span>
<input class="span2" type="password" placeholder="Password"> <input class="span2" type="password" placeholder="Password">
</div> </div>
</form> </form>

6
src/_includes/examples/inline-icons.html
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-icon fa-icon-camera-retro"></i> icon-camera-retro <i class="fa fa-camera-retro"></i> icon-camera-retro
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<i class="fa-icon fa-icon-camera-retro"></i> icon-camera-retro <i class="fa fa-camera-retro"></i> icon-camera-retro
{% endhighlight %} {% endhighlight %}
<div class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> Icon classes are echoed via CSS :before.</div> <div class="alert alert-success"><i class="fa fa-info-circle"></i> Icon classes are echoed via CSS :before.</div>
</div> </div>
</div> </div>
</section> </section>

26
src/_includes/examples/larger-icons.html
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-icon-lg</code>, <code>fa-icon-2x</code>, To increase the size of icons relative to its container, use <code>fa-lg</code>, <code>fa-2x</code>,
<code>fa-icon-3x</code>, or <code>fa-icon-4x</code>. <code>fa-3x</code>, or <code>fa-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-icon-lg</code> (33% increase), <code>fa-icon-2x</code>, Increase the icon size by using the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
<code>fa-icon-3x</code>, or <code>fa-icon-4x</code> classes. <code>fa-3x</code>, or <code>fa-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-icon fa-icon-camera-retro fa-icon-lg"></i> fa-icon-camera-retro</p> <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-2x"></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-3x"></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-4x"></i> fa-icon-camera-retro</p> <p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<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-lg"></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-2x"></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-3x"></i> fa-camera-retro</p>
<p><i class="fa-icon fa-icon-camera-retro fa-icon-4x"></i> fa-icon-camera-retro</p> <p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
{% endhighlight %} {% endhighlight %}
<div class="alert alert-success"> <div class="alert alert-success">
<i class="fa-icon fa-icon-info-circle"></i> If your icons are getting chopped off on top and bottom, make sure you have <i class="fa fa-info-circle"></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>

30
src/_includes/examples/list-bullets.html
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-icon-ul"> <ul class="fa-ul">
<li><i class="fa-icon-li fa-icon fa-icon-check"></i>List bullets (like these)</li> <li><i class="fa-li fa fa-check"></i>List bullets (like these)</li>
<li><i class="fa-icon-li fa-icon fa-icon-check"></i>Buttons</li> <li><i class="fa-li fa fa-check"></i>Buttons</li>
<li><i class="fa-icon-li fa-icon fa-icon-check"></i>Button groups</li> <li><i class="fa-li fa fa-check"></i>Button groups</li>
<li><i class="fa-icon-li fa-icon fa-icon-check"></i>Navigation</li> <li><i class="fa-li fa fa-check"></i>Navigation</li>
<li><i class="fa-icon-li fa-icon fa-icon-check"></i>Prepended form inputs</li> <li><i class="fa-li fa fa-check"></i>Prepended form inputs</li>
<li><i class="fa-icon-li fa-icon fa-icon-check"></i>&hellip;and many more with custom CSS</li> <li><i class="fa-li fa fa-check"></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-icon-ul"> <ul class="fa-ul">
<li><i class="fa-icon-li fa-icon fa-icon-check"></i>Bulleted lists (like this one)</li> <li><i class="fa-li fa fa-check"></i>Bulleted lists (like this one)</li>
<li><i class="fa-icon-li fa-icon fa-icon-check"></i>Buttons</li> <li><i class="fa-li fa fa-check"></i>Buttons</li>
<li><i class="fa-icon-li fa-icon fa-icon-check"></i>Button groups</li> <li><i class="fa-li fa fa-check"></i>Button groups</li>
<li><i class="fa-icon-li fa-icon fa-icon-check"></i>Navigation</li> <li><i class="fa-li fa fa-check"></i>Navigation</li>
<li><i class="fa-icon-li fa-icon fa-icon-check"></i>Prepended form inputs</li> <li><i class="fa-li fa fa-check"></i>Prepended form inputs</li>
<li><i class="fa-icon-li fa-icon fa-icon-check"></i>&hellip;and many more with custom CSS</li> <li><i class="fa-li fa fa-check"></i>&hellip;and many more with custom CSS</li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
<div class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> Make sure to NOT include any whitespace after the icon declaration.</div> <div class="alert alert-success"><i class="fa fa-info-circle"></i> Make sure to NOT include any whitespace after the icon declaration.</div>
</div> </div>
</div> </div>
</section> </section>

16
src/_includes/examples/navigation.html
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-icon fa-icon-home fa-icon-fixed-width"></i> Home</a></li> <li class="active"><a href="#"><i class="fa fa-home fa-fixed-width"></i> Home</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-book fa-fixed-width"></i> Library</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-pencil fa-fixed-width"></i> Applications</a></li>
<li><a href="#"><i class="fa-icon fa-icon-cogs fa-icon-fixed-width"></i> Settings</a></li> <li><a href="#"><i class="fa fa-cogs fa-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-icon fa-icon-home fa-icon-fixed-width"></i> Home</a></li> <li class="active"><a href="#"><i class="fa fa-home fa-fixed-width"></i> Home</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-book fa-fixed-width"></i> Library</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-pencil fa-fixed-width"></i> Applications</a></li>
<li><a href="#"><i class="fa-icon fa-icon-cogs fa-icon-fixed-width"></i> Settings</a></li> <li><a href="#"><i class="fa fa-cogs fa-fixed-width"></i> Settings</a></li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
</div> </div>

54
src/_includes/examples/new.html
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-icon fa-icon-shield"></i>&nbsp; normal<br> <i class="fa fa-shield"></i>&nbsp; normal<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-90"></i>&nbsp; fa-rotate-90<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-180"></i>&nbsp; fa-rotate-180<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-rotate-270"></i>&nbsp; fa-rotate-270<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-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa-icon fa-icon-shield fa-icon-flip-vertical"></i>&nbsp; fa-icon-flip-vertical <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-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-icon-stack"> <span class="fa-stack">
<i class="fa-icon fa-icon-unchecked fa-icon-stack-base"></i> <i class="fa fa-unchecked fa-stack-base"></i>
<i class="fa-icon fa-icon-twitter"></i> <i class="fa fa-twitter"></i>
</span> </span>
fa-icon-twitter on fa-icon-unchecked<br> fa-twitter on fa-unchecked<br>
<span class="fa-icon-stack"> <span class="fa-stack">
<i class="fa-icon fa-icon-circle fa-icon-stack-base"></i> <i class="fa fa-circle fa-stack-base"></i>
<i class="fa-icon fa-icon-flag fa-icon-light"></i> <i class="fa fa-flag fa-light"></i>
</span> </span>
fa-icon-flag on fa-icon-circle<br> fa-flag on fa-circle<br>
<span class="fa-icon-stack"> <span class="fa-stack">
<i class="fa-icon fa-icon-square fa-icon-stack-base"></i> <i class="fa fa-square fa-stack-base"></i>
<i class="fa-icon fa-icon-terminal fa-icon-light"></i> <i class="fa fa-terminal fa-light"></i>
</span> </span>
fa-icon-terminal on fa-icon-square<br> fa-terminal on fa-square<br>
<span class="fa-icon-stack"> <span class="fa-stack">
<i class="fa-icon fa-icon-camera"></i> <i class="fa fa-camera"></i>
<i class="fa-icon fa-icon-ban fa-icon-stack-base text-danger"></i> <i class="fa fa-ban fa-stack-base text-danger"></i>
</span> </span>
fa-icon-camera on fa-icon-ban fa-camera on fa-ban
</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-icon-ul"> <ul class="fa-ul">
<li><i class="fa-icon fa-icon-li fa-icon-chevron-circle-right"></i>New bulleted lists</li> <li><i class="fa fa-li fa-chevron-circle-right"></i>New bulleted lists</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-bullseye"></i>Fix some old bugs</li>
<li><i class="fa-icon fa-icon-li fa-icon-play-circle"></i>And deal with arbitrary</li> <li><i class="fa fa-li fa-play-circle"></i>And deal with arbitrary</li>
<li><i class="fa-icon fa-icon-li fa-icon-check-circle"></i>Font sizes better</li> <li><i class="fa fa-li fa-check-circle"></i>Font sizes better</li>
</ul> </ul>
</div> </div>
</div> </div>

26
src/_includes/examples/rotated-flipped.html
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-icon fa-icon-shield"></i>&nbsp; normal<br> <i class="fa fa-shield"></i>&nbsp; normal<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-90"></i>&nbsp; fa-rotate-90<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-180"></i>&nbsp; fa-rotate-180<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-rotate-270"></i>&nbsp; fa-rotate-270<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-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa-icon fa-icon-shield fa-icon-flip-vertical"></i>&nbsp; fa-icon-flip-vertical <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
</div> </div>
{% highlight html %} {% highlight html %}
<i class="fa-icon fa-icon-shield"></i>&nbsp; normal<br> <i class="fa fa-shield"></i>&nbsp; normal<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-90"></i>&nbsp; fa-rotate-90<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-180"></i>&nbsp; fa-rotate-180<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-rotate-270"></i>&nbsp; fa-rotate-270<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-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa-icon fa-icon-shield fa-icon-flip-vertical"></i>&nbsp; icon-flip-vertical <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical
{% endhighlight %} {% endhighlight %}
<p class="alert alert-success"> <p class="alert alert-success">
<i class="fa-icon fa-icon-info-circle"></i> Rotating and flipping icons aren't yet supported in IE7. <i class="fa fa-info-circle"></i> Rotating and flipping icons aren't yet supported in IE7.
</p> </p>
</div> </div>
</div> </div>

68
src/_includes/examples/stacked.html
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-icon-stack</code> class on the parent and A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent and
<code>fa-icon-stack-base</code> for the bottom icon. <code>fa-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-icon-stack"> <span class="fa-stack">
<i class="fa-icon fa-icon-unchecked fa-icon-stack-base"></i> <i class="fa fa-unchecked fa-stack-base"></i>
<i class="fa-icon fa-icon-twitter"></i> <i class="fa fa-twitter"></i>
</span> </span>
fa-icon-twitter on fa-icon-unchecked<br> fa-twitter on fa-unchecked<br>
<span class="fa-icon-stack"> <span class="fa-stack">
<i class="fa-icon fa-icon-circle fa-icon-stack-base"></i> <i class="fa fa-circle fa-stack-base"></i>
<i class="fa-icon fa-icon-flag fa-icon-light"></i> <i class="fa fa-flag fa-light"></i>
</span> </span>
fa-icon-flag on fa-icon-circle<br> fa-flag on fa-circle<br>
<span class="fa-icon-stack"> <span class="fa-stack">
<i class="fa-icon fa-icon-square fa-icon-stack-base"></i> <i class="fa fa-square fa-stack-base"></i>
<i class="fa-icon fa-icon-terminal fa-icon-light"></i> <i class="fa fa-terminal fa-light"></i>
</span> </span>
fa-icon-terminal on fa-icon-square<br> fa-terminal on fa-square<br>
<span class="fa-icon-stack"> <span class="fa-stack">
<i class="fa-icon fa-icon-camera"></i> <i class="fa fa-camera"></i>
<i class="fa-icon fa-icon-ban fa-icon-stack-base text-danger"></i> <i class="fa fa-ban fa-stack-base text-danger"></i>
</span> </span>
fa-icon-camera on fa-icon-ban fa-camera on fa-ban
</div> </div>
{% highlight html %} {% highlight html %}
<span class="fa-icon-stack"> <span class="fa-stack">
<i class="fa-icon fa-icon-unchecked fa-icon-stack-base"></i> <i class="fa fa-unchecked fa-stack-base"></i>
<i class="fa-icon fa-icon-twitter"></i> <i class="fa fa-twitter"></i>
</span> </span>
fa-icon-twitter on fa-icon-unchecked<br> fa-twitter on fa-unchecked<br>
<span class="fa-icon-stack"> <span class="fa-stack">
<i class="fa-icon fa-icon-circle fa-icon-stack-base"></i> <i class="fa fa-circle fa-stack-base"></i>
<i class="fa-icon fa-icon-flag fa-icon-light"></i> <i class="fa fa-flag fa-light"></i>
</span> </span>
fa-icon-flag on fa-icon-circle<br> fa-flag on fa-circle<br>
<span class="fa-icon-stack"> <span class="fa-stack">
<i class="fa-icon fa-icon-sign-blank fa-icon-stack-base"></i> <i class="fa fa-sign-blank fa-stack-base"></i>
<i class="fa-icon fa-icon-terminal fa-icon-light"></i> <i class="fa fa-terminal fa-light"></i>
</span> </span>
fa-icon-terminal on fa-icon-sign-blank<br> fa-terminal on fa-sign-blank<br>
<span class="fa-icon-stack"> <span class="fa-stack">
<i class="fa-icon fa-icon-camera"></i> <i class="fa fa-camera"></i>
<i class="fa-icon fa-icon-ban-circle fa-icon-stack-base text-danger"></i> <i class="fa fa-ban-circle fa-stack-base text-danger"></i>
</span> </span>
fa-icon-camera on fa-icon-ban-circle fa-camera on fa-ban-circle
{% endhighlight %} {% endhighlight %}
</div> </div>
</div> </div>

4
src/_includes/footer.html
View File

@ -1,7 +1,7 @@
<footer id="footer" class="footer hidden-print"> <footer id="footer" class="footer hidden-print">
<div class="container text-center"> <div class="container text-center">
<div> <div>
<i class="fa-icon fa-icon-flag"></i> Font Awesome {{ site.fontawesome.version }} <i class="fa fa-flag"></i> Font Awesome {{ site.fontawesome.version }}
<span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg"> <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
Created and Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a> Created and Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
</div> </div>
@ -13,7 +13,7 @@
Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a> Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a>
</div> </div>
<div> <div>
Thanks to <a href="http://maxcdn.com"><i class="fa-icon fa-icon-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN for Font Awesome</a> Thanks to <a href="http://maxcdn.com"><i class="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN for Font Awesome</a>
</div> </div>
<div class="project"> <div class="project">
<a href="{{ site.fontawesome.github.url }}">GitHub Project</a> &middot; <a href="{{ site.fontawesome.github.url }}">GitHub Project</a> &middot;

2
src/_includes/icons/brand.html
View File

@ -9,7 +9,7 @@
{% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %} {% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %}
{% for icon in icons_brand %} {% for icon in icons_brand %}
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>
</section> </section>

2
src/_includes/icons/currency.html
View File

@ -5,7 +5,7 @@
{% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %} {% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %}
{% for icon in icons_currency %} {% for icon in icons_currency %}
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>

2
src/_includes/icons/directional.html
View File

@ -5,7 +5,7 @@
{% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %} {% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %}
{% for icon in icons_directional %} {% for icon in icons_directional %}
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>

2
src/_includes/icons/medical.html
View File

@ -5,7 +5,7 @@
{% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %} {% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %}
{% for icon in icons_medical %} {% for icon in icons_medical %}
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>

2
src/_includes/icons/new.html
View File

@ -11,7 +11,7 @@
{% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version %} {% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version %}
{% for icon in icons_new %} {% for icon in icons_new %}
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>

2
src/_includes/icons/text-editor.html
View File

@ -5,7 +5,7 @@
{% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %} {% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %}
{% for icon in icons_text_editor %} {% for icon in icons_text_editor %}
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>

2
src/_includes/icons/video-player.html
View File

@ -5,7 +5,7 @@
{% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %} {% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %}
{% for icon in icons_video_player %} {% for icon in icons_video_player %}
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>

2
src/_includes/icons/web-application.html
View File

@ -5,7 +5,7 @@
{% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %} {% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %}
{% for icon in icons_web_application %} {% for icon in icons_web_application %}
<div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %} {% endfor %}
</div> </div>

30
src/_includes/jumbotron-carousel.html
View File

@ -7,7 +7,7 @@
<div class="actions"> <div class="actions">
<a class="btn btn-default btn-lg" href="{{ page.relative_path }}assets/font-awesome.zip" <a class="btn btn-default btn-lg" href="{{ page.relative_path }}assets/font-awesome.zip"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);"> onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);">
<i class="fa-icon fa-icon-download fa-icon-lg"></i>&nbsp;&nbsp; <i class="fa fa-download fa-lg"></i>&nbsp;&nbsp;
Download Download
</a> </a>
</div> </div>
@ -23,26 +23,26 @@
<div id="icon-carousel" class="carousel slide"> <div id="icon-carousel" class="carousel slide">
<!-- Carousel items --> <!-- Carousel items -->
<div class="carousel-inner"> <div class="carousel-inner">
<div class="active item"><div><i class="fa-icon fa-icon-flag"></i></div></div> <div class="active item"><div><i class="fa fa-flag"></i></div></div>
<div class="item"><div><i class="fa-icon fa-icon-compass"></i></div></div> <div class="item"><div><i class="fa fa-compass"></i></div></div>
<div class="item"><div><i class="fa-icon fa-icon-rocket"></i></div></div> <div class="item"><div><i class="fa fa-rocket"></i></div></div>
<div class="item"><div><i class="fa-icon fa-icon-shield"></i></div></div> <div class="item"><div><i class="fa fa-shield"></i></div></div>
<div class="item"><div><i class="fa-icon fa-icon-star-half-empty"></i></div></div> <div class="item"><div><i class="fa fa-star-half-empty"></i></div></div>
<div class="item"><div><i class="fa-icon fa-icon-envelope-alt"></i></div></div> <div class="item"><div><i class="fa fa-envelope-alt"></i></div></div>
<div class="item"><div><i class="fa-icon fa-icon-medkit"></i></div></div> <div class="item"><div><i class="fa fa-medkit"></i></div></div>
<div class="item"><div><i class="fa-icon fa-icon-book"></i></div></div> <div class="item"><div><i class="fa fa-book"></i></div></div>
<div class="item"><div><i class="fa-icon fa-icon-fighter-jet"></i></div></div> <div class="item"><div><i class="fa fa-fighter-jet"></i></div></div>
<div class="item"><div><i class="fa-icon fa-icon-beer"></i></div></div> <div class="item"><div><i class="fa fa-beer"></i></div></div>
<div class="item"><div><i class="fa-icon fa-icon-heart-alt"></i></div></div> <div class="item"><div><i class="fa fa-heart-alt"></i></div></div>
<div class="item"><div><i class="fa-icon fa-icon-thumbs-up-alt"></i></div></div> <div class="item"><div><i class="fa fa-thumbs-up-alt"></i></div></div>
</div> </div>
<!-- Carousel nav --> <!-- Carousel nav -->
<a class="carousel-control left" href="#icon-carousel" data-slide="prev" <a class="carousel-control left" href="#icon-carousel" data-slide="prev"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);"> onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);">
<i class="fa-icon fa-icon-arrow-circle-left"></i></a> <i class="fa fa-arrow-circle-left"></i></a>
<a class="carousel-control right" href="#icon-carousel" data-slide="next" <a class="carousel-control right" href="#icon-carousel" data-slide="next"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);"> onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);">
<i class="fa-icon fa-icon-arrow-circle-right"></i></a> <i class="fa fa-arrow-circle-right"></i></a>
</div> </div>
</div> </div>
</div> </div>

36
src/_includes/navbar.html
View File

@ -7,35 +7,41 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="{{ page.relative_path }}"><i class="fa-icon fa-icon-flag"></i> Font Awesome</a> <a class="navbar-brand" href="{{ page.relative_path }}"><i class="fa fa-flag"></i> Font Awesome</a>
</div> </div>
<div class="navbar-collapse collapse"> <div class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="hidden-sm {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li> <li class="hidden-sm {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li>
<li class="hidden-sm{% if page.navbar_active == "whats-new" %} active{% endif %}">
<a href="{{ page.relative_path }}whats-new/">What's New</a>
</li>
<li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "whats-new" %} active{% endif %}">
<a href="{{ page.relative_path }}whats-new/">New</a>
</li>
<li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="{{ page.relative_path }}get-started/">Get Started</a></li> <li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="{{ page.relative_path }}get-started/">Get Started</a></li>
<li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li> <li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li>
<li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "icons" %} active{% endif %}"> <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "icons" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa-icon fa-icon-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu pull-right"> <ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}icons/"><i class="fa-icon fa-icon-flag fa-icon-fixed-width"></i>&nbsp; Icons</a></li> <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fixed-width"></i>&nbsp; Icons</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="{{ page.relative_path }}icons/#new"><i class="fa-icon fa-icon-rub fa-icon-fixed-width"></i>&nbsp; New Icons in {{ site.fontawesome.minor_version }}</a></li> <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-rub fa-fixed-width"></i>&nbsp; New Icons in {{ site.fontawesome.minor_version }}</a></li>
<li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa-icon fa-icon-camera-retro fa-icon-fixed-width"></i>&nbsp; Web Application Icons</a></li> <li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fixed-width"></i>&nbsp; Web Application Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#currency"><i class="fa-icon fa-icon-won fa-icon-fixed-width"></i>&nbsp; Currency Icons</a></li> <li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fixed-width"></i>&nbsp; Currency Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa-icon fa-icon-file-text-alt fa-icon-fixed-width"></i>&nbsp; Text Editor Icons</a></li> <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-alt fa-fixed-width"></i>&nbsp; Text Editor Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#directional"><i class="fa-icon fa-icon-hand-alt-right fa-icon-fixed-width"></i>&nbsp; Directional Icons</a></li> <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-hand-alt-right fa-fixed-width"></i>&nbsp; Directional Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa-icon fa-icon-play-circle fa-icon-fixed-width"></i>&nbsp; Video Player Icons</a></li> <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fixed-width"></i>&nbsp; Video Player Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#brand"><i class="fa-icon fa-icon-github fa-icon-fixed-width"></i>&nbsp; Brand Icons</a></li> <li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fixed-width"></i>&nbsp; Brand Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#medical"><i class="fa-icon fa-icon-medkit fa-icon-fixed-width"></i>&nbsp; Medical Icons</a></li> <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fixed-width"></i>&nbsp; Medical Icons</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li> <li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "examples" %} active{% endif %}"> <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "examples" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa-icon fa-icon-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu pull-right"> <ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}examples/">Examples</a></li> <li><a href="{{ page.relative_path }}examples/">Examples</a></li>
@ -55,12 +61,6 @@
<li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li> <li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
</ul> </ul>
</li> </li>
<li class="hidden-sm{% if page.navbar_active == "whats-new" %} active{% endif %}">
<a href="{{ page.relative_path }}whats-new/">What's New</a>
</li>
<li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "whats-new" %} active{% endif %}">
<a href="{{ page.relative_path }}whats-new/">New</a>
</li>
<li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li> <li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li>
<li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li> <li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
</ul> </ul>

12
src/_includes/new-features.html
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-icon fa-icon-file-text-alt"></i> Completely Rewritten</h4> <h4><i class="fa fa-file-text-alt"></i> Completely Rewritten</h4>
Everything re-written from the ground up for speed and simplicity. Everything re-written from the ground up for speed and simplicity.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa-icon fa-icon-fighter-jet"></i> CSS Best Practices</h4> <h4><i class="fa fa-fighter-jet"></i> CSS Best Practices</h4>
New icon base class allows simpler CSS, faster rendering, and easier control. New icon base class allows simpler CSS, faster rendering, and easier control.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa-icon fa-icon-terminal"></i> New Icon Names</h4> <h4><i class="fa fa-terminal"></i> New Icon Names</h4>
Icons have been renamed to improve consistency and predictability. Icons have been renamed to improve consistency and predictability.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa-icon fa-icon-thumbs-up-alt"></i> Bootstrap 3</h4> <h4><i class="fa fa-thumbs-up-alt"></i> Bootstrap 3</h4>
Font Awesome {{ site.fontawesome.minor_version }} is fully tested and compatible with Bootstrap 3. Font Awesome {{ site.fontawesome.minor_version }} is fully tested and compatible with Bootstrap 3.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa-icon fa-icon-code"></i> Better Compatibility</h4> <h4><i class="fa fa-code"></i> Better Compatibility</h4>
Font Awesome is now more compatible with all web frameworks, including Foundation. Font Awesome is now more compatible with all web frameworks, including Foundation.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa-icon fa-icon-rub"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4> <h4><i class="fa fa-rub"></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> </div>

88
src/_includes/new-naming.html
View File

@ -1,6 +1,6 @@
<section id="new-naming"> <section id="new-naming">
<h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2> <h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2>
<p class="lead text-center alert alert-success">fa-icon-[name]-[shape]-[alt]-[direction]</p> <p class="lead text-center alert alert-success">fa-[name]-[shape]-[alt]-[direction]</p>
<p> <p>
A desire for better icon naming <strong>consistency</strong> and <strong>predictability</strong> are at the heart A desire for better icon naming <strong>consistency</strong> and <strong>predictability</strong> are at the heart
of the changes in naming conventions. Once you know the name of the base icon shape, you should be able to predict of the changes in naming conventions. Once you know the name of the base icon shape, you should be able to predict
@ -8,110 +8,110 @@
</p> </p>
<div class="row"> <div class="row">
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">fa-icon-*</h4> <h4 class="margin-bottom-sm">fa-*</h4>
<p class="margin-bottom-sm">Solid icons as the base variant</p> <p class="margin-bottom-sm">Solid icons as the base variant</p>
<ul class="fa-icon-ul padding-left-sm"> <ul class="fa-ul padding-left-sm">
<li> <li>
<i class="fa-icon fa-icon-bookmark fa-icon-li"></i> <i class="fa fa-bookmark fa-li"></i>
fa-icon-bookmark fa-bookmark
</li> </li>
<li> <li>
<i class="fa-icon fa-icon-comment fa-icon-li"></i> <i class="fa fa-comment fa-li"></i>
fa-icon-comment fa-comment
</li> </li>
<li> <li>
<i class="fa-icon fa-icon-folder fa-icon-li"></i> <i class="fa fa-folder fa-li"></i>
fa-icon-folder fa-folder
</li> </li>
</ul> </ul>
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">*-alt</h4> <h4 class="margin-bottom-sm">*-alt</h4>
<p class="margin-bottom-sm">Outlined version of previous modifier</p> <p class="margin-bottom-sm">Outlined version of previous modifier</p>
<ul class="fa-icon-ul padding-left-sm"> <ul class="fa-ul padding-left-sm">
<li> <li>
<i class="fa-icon fa-icon-bookmark-alt fa-icon-li"></i> <i class="fa fa-bookmark-alt fa-li"></i>
fa-icon-bookmark-alt fa-bookmark-alt
</li> </li>
<li> <li>
<i class="fa-icon fa-icon-comment-alt fa-icon-li"></i> <i class="fa fa-comment-alt fa-li"></i>
fa-icon-comment-alt fa-comment-alt
</li> </li>
<li> <li>
<i class="fa-icon fa-icon-folder-alt fa-icon-li"></i> <i class="fa fa-folder-alt fa-li"></i>
fa-icon-folder-alt fa-folder-alt
</li> </li>
</ul> </ul>
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">*-circle</h4> <h4 class="margin-bottom-sm">*-circle</h4>
<p class="margin-bottom-sm">Circle under previous modifier</p> <p class="margin-bottom-sm">Circle under previous modifier</p>
<ul class="fa-icon-ul padding-left-sm"> <ul class="fa-ul padding-left-sm">
<li> <li>
<i class="fa-icon fa-icon-check-circle fa-icon-li"></i> <i class="fa fa-check-circle fa-li"></i>
fa-icon-check-circle fa-check-circle
</li> </li>
<li> <li>
<i class="fa-icon fa-icon-exclamation-circle fa-icon-li"></i> <i class="fa fa-exclamation-circle fa-li"></i>
fa-icon-exclamation-circle fa-exclamation-circle
</li> </li>
<li> <li>
<i class="fa-icon fa-icon-plus-circle fa-icon-li"></i> <i class="fa fa-plus-circle fa-li"></i>
fa-icon-plus-circle fa-plus-circle
</li> </li>
</ul> </ul>
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">*-square</h4> <h4 class="margin-bottom-sm">*-square</h4>
<p class="margin-bottom-sm">Square under previous modifier</p> <p class="margin-bottom-sm">Square under previous modifier</p>
<ul class="fa-icon-ul padding-left-sm"> <ul class="fa-ul padding-left-sm">
<li> <li>
<i class="fa-icon fa-icon-check-square fa-icon-li"></i> <i class="fa fa-check-square fa-li"></i>
fa-icon-check-square fa-check-square
</li> </li>
<li> <li>
<i class="fa-icon fa-icon-twitter-square fa-icon-li"></i> <i class="fa fa-twitter-square fa-li"></i>
fa-icon-twitter-square fa-twitter-square
</li> </li>
<li> <li>
<i class="fa-icon fa-icon-plus-square fa-icon-li"></i> <i class="fa fa-plus-square fa-li"></i>
fa-icon-plus-square fa-plus-square
</li> </li>
</ul> </ul>
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">*-right, *-up, etc.</h4> <h4 class="margin-bottom-sm">*-right, *-up, etc.</h4>
<p class="margin-bottom-sm">Directional modifier always at the end</p> <p class="margin-bottom-sm">Directional modifier always at the end</p>
<ul class="fa-icon-ul padding-left-sm"> <ul class="fa-ul padding-left-sm">
<li> <li>
<i class="fa-icon fa-icon-arrow-right fa-icon-li"></i> <i class="fa fa-arrow-right fa-li"></i>
fa-icon-arrow-right fa-arrow-right
</li> </li>
<li> <li>
<i class="fa-icon fa-icon-arrow-circle-right fa-icon-li"></i> <i class="fa fa-arrow-circle-right fa-li"></i>
fa-icon-arrow-circle-right fa-arrow-circle-right
</li> </li>
<li> <li>
<i class="fa-icon fa-icon-angle-double-right fa-icon-li"></i> <i class="fa fa-angle-double-right fa-li"></i>
fa-icon-angle-double-right fa-angle-double-right
</li> </li>
</ul> </ul>
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">Combine 'em up...</h4> <h4 class="margin-bottom-sm">Combine 'em up...</h4>
<p class="margin-bottom-sm">Consistent when strung together</p> <p class="margin-bottom-sm">Consistent when strung together</p>
<ul class="fa-icon-ul padding-left-sm"> <ul class="fa-ul padding-left-sm">
<li> <li>
<i class="fa-icon fa-icon-arrow-circle-alt-right fa-icon-li"></i> <i class="fa fa-arrow-circle-alt-right fa-li"></i>
fa-icon-arrow-circle-alt-right fa-arrow-circle-alt-right
</li> </li>
<li> <li>
<i class="fa-icon fa-icon-caret-square-alt-right fa-icon-li"></i> <i class="fa fa-caret-square-alt-right fa-li"></i>
fa-icon-caret-square-alt-right fa-caret-square-alt-right
</li> </li>
<li> <li>
<i class="fa-icon fa-icon-hand-alt-right fa-icon-li"></i> <i class="fa fa-hand-alt-right fa-li"></i>
fa-icon-hand-alt-right fa-hand-alt-right
</li> </li>
</ul> </ul>
</div> </div>

12
src/_includes/tests/rotated-flipped-inside-anchor.html
View File

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

12
src/_includes/tests/rotated-flipped-inside-btn.html
View File

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

12
src/_includes/tests/rotated-flipped.html
View File

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

54
src/_includes/tests/stacked-inside-anchor.html
View File

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

54
src/_includes/tests/stacked.html
View File

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

2
src/_includes/thanks-to.html
View File

@ -17,7 +17,7 @@
</div> </div>
<div class="col-md-4 col-sm-4"> <div class="col-md-4 col-sm-4">
<p> <p>
Thanks to <a href="http://maxcdn.com"><i class="fa-icon fa-icon-maxcdn">&nbsp;</i>MaxCDN</a> for providing the excellent Thanks to <a href="http://maxcdn.com"><i class="fa fa-maxcdn">&nbsp;</i>MaxCDN</a> for providing the excellent
<a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN</a>, the fastest and easiest way to <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN</a>, the fastest and easiest way to
<a href="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome. <a href="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome.
</p> </p>

16
src/_includes/why.html
View File

@ -1,36 +1,36 @@
<section id="why" class="feature-list"> <section id="why" 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-icon fa-icon-flag"></i> One Font, {{ icons | size }} Icons</h4> <h4><i class="fa fa-flag"></i> One Font, {{ icons | size }} Icons</h4>
In a single collection, Font Awesome is a pictographic language of web-related actions. In a single collection, Font Awesome is a pictographic language of web-related actions.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa-icon fa-icon-pencil"></i> CSS Control</h4> <h4><i class="fa fa-pencil"></i> CSS Control</h4>
Easily style icon color, size, shadow, and anything that's possible with CSS. Easily style icon color, size, shadow, and anything that's possible with CSS.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa-icon fa-icon-fullscreen"></i> Infinite Scalability</h4> <h4><i class="fa fa-fullscreen"></i> Infinite Scalability</h4>
Scalable vector graphics means every icon looks awesome at any size. Scalable vector graphics means every icon looks awesome at any size.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa-icon fa-icon-microphone"></i> Free, as in Speech</h4> <h4><i class="fa fa-microphone"></i> Free, as in Speech</h4>
Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>. Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa-icon fa-icon-eye"></i> Perfect on Retina Displays</h4> <h4><i class="fa fa-eye"></i> Perfect on Retina Displays</h4>
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays. Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa-icon fa-icon-thumbs-up-alt"></i> Made for Bootstrap</h4> <h4><i class="fa fa-thumbs-up-alt"></i> Made for Bootstrap</h4>
Designed from scratch to be fully compatible with <a href="{{ site.bootstrap.url }}">Bootstrap {{ site.bootstrap.version }}</a>. Designed from scratch to be fully compatible with <a href="{{ site.bootstrap.url }}">Bootstrap {{ site.bootstrap.version }}</a>.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa-icon fa-icon-desktop"></i> Desktop Friendly</h4> <h4><i class="fa fa-desktop"></i> Desktop Friendly</h4>
To use on the desktop or for a complete set of vectors, To use on the desktop or for a complete set of vectors,
check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>. check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa-icon fa-icon-search"></i> Screen Reader Compatible</h4> <h4><i class="fa fa-search"></i> Screen Reader Compatible</h4>
Font Awesome won't trip up screen readers, unlike other icon fonts. Font Awesome won't trip up screen readers, unlike other icon fonts.
</div> </div>
</div> </div>

24
src/_layouts/icon.html
View File

@ -6,19 +6,19 @@ relative_path: ../../
<div class="jumbotron jumbotron-icon"> <div class="jumbotron jumbotron-icon">
<div class="container"> <div class="container">
<div class="info-icons"> <div class="info-icons">
<i class="fa-icon fa-icon-{{ page.icon.id }} fa-icon-6"></i>&nbsp;&nbsp; <i class="fa fa-{{ page.icon.id }} fa-6"></i>&nbsp;&nbsp;
<span class="hide-xs"> <span class="hide-xs">
<i class="fa-icon fa-icon-{{ page.icon.id }} fa-icon-5"></i>&nbsp;&nbsp; <i class="fa fa-{{ page.icon.id }} fa-5"></i>&nbsp;&nbsp;
<span class="hide-sm"><i class="fa-icon fa-icon-{{ page.icon.id }} fa-icon-4"></i>&nbsp;&nbsp;</span> <span class="hide-sm"><i class="fa fa-{{ page.icon.id }} fa-4"></i>&nbsp;&nbsp;</span>
<i class="fa-icon fa-icon-{{ page.icon.id }} fa-icon-3"></i>&nbsp;&nbsp; <i class="fa fa-{{ page.icon.id }} fa-3"></i>&nbsp;&nbsp;
<i class="fa-icon fa-icon-{{ page.icon.id }} fa-icon-2"></i>&nbsp; <i class="fa fa-{{ page.icon.id }} fa-2"></i>&nbsp;
</span> </span>
<i class="fa-icon fa-icon-{{ page.icon.id }} fa-icon-1"></i> <i class="fa fa-{{ page.icon.id }} fa-1"></i>
</div> </div>
<h1 class="info-class"> <h1 class="info-class">
fa-icon-{{ page.icon.id }} fa-{{ page.icon.id }}
<small> <small>
<i class="fa-icon fa-icon-{{ page.icon.id }}"></i> &middot; <i class="fa fa-{{ page.icon.id }}"></i> &middot;
Unicode: <span class="upper">{{ page.icon.unicode }}</span> &middot; Unicode: <span class="upper">{{ page.icon.unicode }}</span> &middot;
Created: v{{ page.icon.created }} &middot; Created: v{{ page.icon.created }} &middot;
Categories: Categories:
@ -29,7 +29,7 @@ relative_path: ../../
{% if icon_alias_count > 0 %} {% if icon_alias_count > 0 %}
&middot; Aliases: &middot; Aliases:
{% for alias in page.icon.aliases %} {% for alias in page.icon.aliases %}
fa-icon-{{ alias }}{% unless forloop.last %},{% endunless %} fa-{{ alias }}{% unless forloop.last %},{% endunless %}
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</small> </small>
@ -45,14 +45,14 @@ relative_path: ../../
<p>After you get <a href="{{ page.relative_path }}get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p> <p>After you get <a href="{{ page.relative_path }}get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</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;">
<i class="fa-icon fa-icon-{{ page.icon.id }}"></i> fa-icon-{{ page.icon.id }} <i class="fa fa-{{ page.icon.id }}"></i> fa-{{ page.icon.id }}
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<i class="fa-icon fa-icon-{{ page.icon.id }}"></i> fa-icon-{{ page.icon.id }} <i class="fa fa-{{ page.icon.id }}"></i> fa-{{ page.icon.id }}
{% endhighlight %} {% endhighlight %}
<br> <br>
<div class="lead"><i class="fa-icon fa-icon-info-sign"></i> Looking for more? Check out the <a href="{{ page.relative_path }}examples/">examples</a>.</div> <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="{{ page.relative_path }}examples/">examples</a>.</div>
</div> </div>
<div class="col-md-3 col-sm-3"> <div class="col-md-3 col-sm-3">
<div class="info-ad">{% include ads/carbon-light-vertical.html %}</div> <div class="info-ad">{% include ads/carbon-light-vertical.html %}</div>

2
src/assets/font-awesome/less/variables.less vendored
View File

@ -3,9 +3,9 @@
// Variables // Variables
// -------------------------- // --------------------------
@fa-css-prefix: {{ site.fontawesome.css_prefix }};
@fa-font-path: "../fonts"; @fa-font-path: "../fonts";
//@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version}}/font"; // for referencing Bootstrap CDN font files directly //@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version}}/font"; // for referencing Bootstrap CDN font files directly
@fa-css-prefix: {{ site.fontawesome.css_prefix }};
@fa-version: "{{ site.fontawesome.version }}"; @fa-version: "{{ site.fontawesome.version }}";
@fa-border-color: #eee; @fa-border-color: #eee;
@fa-icon-muted: #eee; @fa-icon-muted: #eee;

2
src/assets/font-awesome/scss/_variables.scss vendored
View File

@ -3,9 +3,9 @@
// Variables // Variables
// -------------------------- // --------------------------
$fa-css-prefix: {{ site.fontawesome.css_prefix }};
$fa-font-path: "../fonts" !default; $fa-font-path: "../fonts" !default;
//$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version}}/font" !default; // for referencing Bootstrap CDN font files directly //$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version}}/font" !default; // for referencing Bootstrap CDN font files directly
$fa-css-prefix: {{ site.fontawesome.css_prefix }};
$fa-version: "{{ site.fontawesome.version }}" !default; $fa-version: "{{ site.fontawesome.version }}" !default;
$fa-border-color: #eee !default; $fa-border-color: #eee !default;
$fa-icon-muted: #eee !default; $fa-icon-muted: #eee !default;

12
src/assets/less/site/bootstrap/jumbotron.less
View File

@ -58,11 +58,11 @@
dd { margin-left: @component-offset-horizontal - 85; } dd { margin-left: @component-offset-horizontal - 85; }
} }
} }
.fa-icon-2 { font-size: 2em; } .fa-2 { font-size: 2em; }
.fa-icon-3 { font-size: 4em; } .fa-3 { font-size: 4em; }
.fa-icon-4 { font-size: 7em; } .fa-4 { font-size: 7em; }
.fa-icon-5 { font-size: 12em; } .fa-5 { font-size: 12em; }
.fa-icon-6 { font-size: 20em; } .fa-6 { font-size: 20em; }
.fa-icon-1, .fa-icon-2, .fa-icon-3, .fa-icon-4, .fa-icon-5, .fa-icon-6 { margin-right: 1/14em; } .fa-1, .fa-2, .fa-3, .fa-4, .fa-5, .fa-6 { margin-right: 1/14em; }
} }

2
src/assets/less/site/bootstrap/navbar.less
View File

@ -6,7 +6,7 @@
font-family: @font-family-serif; font-family: @font-family-serif;
font-weight: 300; font-weight: 300;
font-size: 20px; font-size: 20px;
.fa-icon-flag { padding-right: 3px; } .fa-flag { padding-right: 3px; }
} }
.navbar-nav > li > a { padding: 11px 10px 9px; } .navbar-nav > li > a { padding: 11px 10px 9px; }

2
src/assets/less/site/feature-list.less
View File

@ -1,7 +1,7 @@
.feature-list { .feature-list {
.col-md-4 { margin-bottom: 22px; } .col-md-4 { margin-bottom: 22px; }
h4 { h4 {
.fa-icon:before { .fa:before {
vertical-align: -10%; vertical-align: -10%;
font-size: 28px; font-size: 28px;
display: inline-block; display: inline-block;

4
src/assets/less/site/fontawesome-icon-list.less
View File

@ -9,7 +9,7 @@
padding-left: 10px; padding-left: 10px;
border-radius: @border-radius-base; border-radius: @border-radius-base;
.fa-icon { .fa {
width: 32px; width: 32px;
font-size: 14px; font-size: 14px;
display: inline-block; display: inline-block;
@ -21,7 +21,7 @@
background-color: @fa-green; background-color: @fa-green;
color: @jumbotron-color; color: @jumbotron-color;
text-decoration: none; text-decoration: none;
.fa-icon { .fa {
font-size: 28px; font-size: 28px;
vertical-align: -6px; vertical-align: -6px;
} }

4
src/assets/less/site/responsive/screen-xs.less
View File

@ -34,8 +34,8 @@
} }
.jumbotron-icon { .jumbotron-icon {
.fa-icon-1, .fa-icon-2, .fa-icon-3, .fa-icon-4, .fa-icon-5, .fa-icon-6 { margin-right: 0; } .fa-1, .fa-2, .fa-3, .fa-4, .fa-5, .fa-6 { margin-right: 0; }
.fa-icon-6 { font-size: 16em; } .fa-6 { font-size: 16em; }
h1 small { h1 small {
display: block; display: block;
margin-top: 15px; margin-top: 15px;

6
src/cheatsheet.html
View File

@ -3,7 +3,7 @@ layout: base
title: Font Awesome Cheatsheet title: Font Awesome Cheatsheet
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa-icon fa-icon-list-ul"></i>&nbsp; Cheatsheet{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-list-ul"></i>&nbsp; Cheatsheet{% endcapture %}
{% capture jumbotron_p %}The complete Font Awesome {{ site.fontawesome.version }} icon reference{% endcapture %} {% capture jumbotron_p %}The complete Font Awesome {{ site.fontawesome.version }} icon reference{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}
@ -23,8 +23,8 @@ relative_path: ../
<div class="row"> <div class="row">
{% for icon in icons %} {% for icon in icons %}
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<i class="fa-icon fa-icon-fixed-width">&#x{{ icon.unicode }}</i> <i class="fa fa-fixed-width">&#x{{ icon.unicode }}</i>
fa-icon-{{ icon.id }} fa-{{ icon.id }}
<span class="muted">(&amp;#x{{ icon.unicode }};)</span> <span class="muted">(&amp;#x{{ icon.unicode }};)</span>
</div> </div>
{% endfor %} {% endfor %}

2
src/community.html
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-icon fa-icon-thumbs-up-alt"></i>&nbsp; Community{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-thumbs-up-alt"></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 %}

2
src/examples.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-icon fa-icon-magic"></i>&nbsp; Examples{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-magic"></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 %}

4
src/get-started.html
View File

@ -4,7 +4,7 @@ title: Get Started with Font Awesome
navbar_active: get-started navbar_active: get-started
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa-icon fa-icon-cogs"></i>&nbsp; Get Started{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-cogs"></i>&nbsp; Get Started{% endcapture %}
{% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.fontawesome.version }} onto your website{% endcapture %} {% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.fontawesome.version }} onto your website{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}
@ -93,7 +93,7 @@ $ gem install font-awesome-sass
{% highlight scss %} {% highlight scss %}
@fa-font-path: "../font"; @fa-font-path: "../font";
{% endhighlight %} {% endhighlight %}
<p class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> The font path is relative from your compiled CSS directory.</p> <p class="alert alert-success"><i class="fa fa-info-circle"></i> The font path is relative from your compiled CSS directory.</p>
</li> </li>
<li>Re-compile your LESS or SCSS if using a static compiler. Otherwise, you should be good to go.</li> <li>Re-compile your LESS or SCSS if using a static compiler. Otherwise, you should be good to go.</li>
<li>Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li> <li>Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li>

2
src/icons.html
View File

@ -4,7 +4,7 @@ title: Font Awesome Icons
navbar_active: icons navbar_active: icons
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa-icon fa-icon-flag"></i>&nbsp; The Icons{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-flag"></i>&nbsp; The Icons{% endcapture %}
{% capture jumbotron_p %}The complete set of {{ icons | size }} icons in Font Awesome {{ site.fontawesome.version }}{% endcapture %} {% capture jumbotron_p %}The complete set of {{ icons | size }} icons in Font Awesome {{ site.fontawesome.version }}{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}

6
src/license.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-icon fa-icon-gavel"></i>&nbsp; License{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-gavel"></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 %}
@ -21,9 +21,9 @@ relative_path: ../
<section> <section>
<div class="alert alert-success"> <div class="alert alert-success">
<ul class="fa-icon-ul margin-bottom-none"> <ul class="fa-ul margin-bottom-none">
<li> <li>
<i class="fa-icon-li fa-icon fa-icon-info-circle fa-icon-lg"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated: <i class="fa-li fa fa-info-circle fa-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>

392
src/test.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-icon fa-icon-building"></i> Building <i class="fa fa-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-icon fa-icon-building fa-icon-lg"></i> Building Large <i class="fa fa-building fa-lg"></i> Building Large
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<i class="fa-icon fa-icon-building"></i> Building <i class="fa fa-building"></i> Building
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<i class="fa-icon fa-icon-building fa-icon-lg"></i> Building Large <i class="fa fa-building fa-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-icon fa-icon-building"></i> Building <i class="fa fa-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-icon fa-icon-building fa-icon-lg"></i> Building Large <i class="fa fa-building fa-lg"></i> Building Large
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<i class="fa-icon fa-icon-building fa-icon-lg"></i> Building Large <i class="fa fa-building fa-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-icon fa-icon-circle"></i> Circle <i class="fa fa-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-icon fa-icon-circle fa-icon-lg"></i> Circle Large <i class="fa fa-circle fa-lg"></i> Circle Large
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<i class="fa-icon fa-icon-circle"></i> Circle <i class="fa fa-circle"></i> Circle
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<i class="fa-icon fa-icon-circle fa-icon-lg"></i> Circle Large <i class="fa fa-circle fa-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-icon fa-icon-circle"></i> Circle <i class="fa fa-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-icon fa-icon-circle fa-icon-lg"></i> Circle Large <i class="fa fa-circle fa-lg"></i> Circle Large
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<i class="fa-icon fa-icon-circle fa-icon-lg"></i> Circle Large <i class="fa fa-circle fa-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-icon fa-icon-building padding-right"></i>Link Here</a> <a href="#"><i class="fa fa-building padding-right"></i>Link Here</a>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<a href="#"><i class="fa-icon fa-icon-building fa-icon-lg padding-right"></i>Link Here</a> <a href="#"><i class="fa fa-building fa-lg padding-right"></i>Link Here</a>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<a href="#"><i class="fa-icon fa-icon-caret-down padding-right"></i>Link Here</a> <a href="#"><i class="fa fa-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-icon fa-icon-double-angle-right padding-left"></i></a> <a href="#">Link Here<i class="fa fa-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-icon fa-icon-double-angle-right fa-icon-lg padding-left"></i></a> <a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left"></i></a>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<a href="#">Link Here<i class="fa-icon fa-icon-caret-down padding-left"></i></a> <a href="#">Link Here<i class="fa fa-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-icon fa-icon-building padding-right-sm"></i>Link Here</a> <a href="#"><i class="fa fa-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-icon fa-icon-building fa-icon-lg padding-right-sm"></i>Link Here</a> <a href="#"><i class="fa fa-building fa-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-icon fa-icon-caret-down padding-right-sm"></i>Link Here</a> <a href="#"><i class="fa fa-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-icon fa-icon-double-angle-right padding-left-sm"></i></a> <a href="#">Link Here<i class="fa fa-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-icon fa-icon-double-angle-right fa-icon-lg padding-left-sm"></i></a> <a href="#">Link Here<i class="fa fa-double-angle-right fa-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-icon fa-icon-caret-down padding-left-sm"></i></a> <a href="#">Link Here<i class="fa fa-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-icon fa-icon-flag"></i> Font Awesome</a> <a class="navbar-brand" href="#"><i class="fa fa-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-icon fa-icon-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa-icon fa-icon-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li> <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li>
</ul> </ul>
</li> </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-building fa-lg"></i> Nav Item 3</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-envelope"></i> Nav Item 4</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 fa-lg"></i> Nav Item 5</a></li>
<li style="border: solid 1px white;"><a href="#examples"><i class="fa-icon fa-icon-circle"></i> Nav Item 6</a></li> <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-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-icon fa-icon-building"></i> 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 class="btn btn-default btn-xs"><i class="fa fa-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-icon fa-icon-building"></i> 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 class="btn btn-default btn-sm"><i class="fa fa-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-icon fa-icon-building"></i> 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 class="btn btn-default"><i class="fa fa-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-icon fa-icon-building"></i> 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 class="btn btn-default btn-lg"><i class="fa fa-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-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>
<button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building fa-icon-lg"></i></button> <button class="btn btn-default btn-xs"><i class="fa fa-building fa-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-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>
<button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building fa-icon-lg"></i></button> <button class="btn btn-default btn-sm"><i class="fa fa-building fa-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-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>
<button class="btn btn-default"><i class="fa-icon fa-icon-building fa-icon-lg"></i></button> <button class="btn btn-default"><i class="fa fa-building fa-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-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>
<button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building fa-icon-lg"></i></button> <button class="btn btn-default btn-lg"><i class="fa fa-building fa-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-icon fa-icon-circle"></i> 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 class="btn btn-default btn-xs"><i class="fa fa-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-icon fa-icon-circle"></i> 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 class="btn btn-default btn-sm"><i class="fa fa-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-icon fa-icon-circle"></i> 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 class="btn btn-default"><i class="fa fa-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-icon fa-icon-circle"></i> 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 class="btn btn-default btn-lg"><i class="fa fa-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-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>
<button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></button> <button class="btn btn-default btn-xs"><i class="fa fa-circle fa-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-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>
<button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></button> <button class="btn btn-default btn-sm"><i class="fa fa-circle fa-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-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>
<button class="btn btn-default"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></button> <button class="btn btn-default"><i class="fa fa-circle fa-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-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>
<button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></button> <button class="btn btn-default btn-lg"><i class="fa fa-circle fa-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-icon fa-icon-building"></i> 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></a> <a class="btn btn-default btn-xs"><i class="fa fa-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-icon fa-icon-building"></i> 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></a> <a class="btn btn-default btn-sm"><i class="fa fa-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-icon fa-icon-building"></i> 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></a> <a class="btn btn-default"><i class="fa fa-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-icon fa-icon-building"></i> 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></a> <a class="btn btn-default btn-lg"><i class="fa fa-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-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> Button</a>
<a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building fa-icon-lg"></i></a> <a class="btn btn-default btn-xs"><i class="fa fa-building fa-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-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> Button</a>
<a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building fa-icon-lg"></i></a> <a class="btn btn-default btn-sm"><i class="fa fa-building fa-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-icon fa-icon-building fa-icon-lg"></i> 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></a> <a class="btn btn-default"><i class="fa fa-building fa-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-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> Button</a>
<a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building fa-icon-lg"></i></a> <a class="btn btn-default btn-lg"><i class="fa fa-building fa-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-icon fa-icon-circle"></i> 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></a> <a class="btn btn-default btn-xs"><i class="fa fa-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-icon fa-icon-circle"></i> 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></a> <a class="btn btn-default btn-sm"><i class="fa fa-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-icon fa-icon-circle"></i> 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></a> <a class="btn btn-default"><i class="fa fa-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-icon fa-icon-circle"></i> 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></a> <a class="btn btn-default btn-lg"><i class="fa fa-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-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> Button</a>
<a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></a> <a class="btn btn-default btn-xs"><i class="fa fa-circle fa-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-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> Button</a>
<a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></a> <a class="btn btn-default btn-sm"><i class="fa fa-circle fa-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-icon fa-icon-circle fa-icon-lg"></i> 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></a> <a class="btn btn-default"><i class="fa fa-circle fa-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-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> Button</a>
<a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></a> <a class="btn btn-default btn-lg"><i class="fa fa-circle fa-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-icon fa-icon-adjust"></i> <i class="fa fa-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-icon fa-icon-adjust"></i> <i class="fa fa-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-icon fa-icon-adjust"></i> <i class="fa fa-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-icon fa-icon-github fa-icon-2x pull-left"></i> <i class="fa fa-github fa-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-icon fa-icon-github fa-icon-2x pull-left"></i> <i class="fa fa-github fa-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-icon fa-icon-github fa-icon-2x pull-left"></i> <i class="fa fa-github fa-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-icon fa-icon-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa-icon fa-icon-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li> <li><a href="#"><i class="fa fa-building fa-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-icon fa-icon-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa-icon fa-icon-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li> <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li>
</ul> </ul>
</li> </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-building fa-lg"></i> Nav Item 4</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-spinner fa-spin"></i> Nav Item 5</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 fa-lg"></i> Nav Item 6</a></li>
<li class="active"><a href="#examples"><i class="fa-icon fa-icon-circle"></i> Nav Item 7</a></li> <li class="active"><a href="#examples"><i class="fa fa-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-icon fa-icon-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa-icon fa-icon-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li> <li><a href="#"><i class="fa fa-building fa-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-icon fa-icon-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa-icon fa-icon-building"></i> Menu Item 1</a></li> <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
<li><a href="#"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li> <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li>
</ul> </ul>
</li> </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-building fa-lg"></i> Nav Item 4</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-spinner fa-spin"></i> Nav Item 5</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 fa-lg"></i> Nav Item 6</a></li>
<li class="active"><a href="#examples"><i class="fa-icon fa-icon-circle"></i> Nav Item 7</a></li> <li class="active"><a href="#examples"><i class="fa fa-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-icon fa-icon-chevron-right fa-icon-fixed-width pull-right"></i> Overview<i class="fa fa-chevron-right fa-fixed-width pull-right"></i>
</a> </a>
<a href="#" class="list-group-item"> <a href="#" class="list-group-item">
Overview<i class="fa-icon fa-icon-chevron-right fa-icon-fixed-width pull-right"></i> Overview<i class="fa fa-chevron-right fa-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-icon fa-icon-circle"></i> Icon should be hidden <i class="hide fa fa-circle"></i> Icon should be hidden
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<i class="hide fa-icon fa-icon-circle"></i> Icon should be hidden <i class="hide fa fa-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-icon fa-icon-stethoscope fa-icon-3x pull-left fa-icon-border"></i> <i class="fa fa-stethoscope fa-3x pull-left fa-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-icon fa-icon-ambulance fa-icon-4x pull-right fa-icon-border"></i> <i class="fa fa-ambulance fa-4x pull-right fa-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-icon fa-icon-building fa-icon-2x pull-left fa-icon-border"></i> <i class="fa fa-building fa-2x pull-left fa-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-icon fa-icon-stethoscope fa-icon-3x pull-right fa-icon-border"></i> <i class="fa fa-stethoscope fa-3x pull-right fa-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-icon fa-icon-ambulance fa-icon-4x pull-left"></i> <i class="fa fa-ambulance fa-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,11 +540,11 @@ 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-icon-ul"> <ul class="fa-ul">
<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-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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-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-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa-icon fa-icon-building"></i> <i class="fa fa-building"></i>
<span class="label label-default">foo</span> <span class="label label-default">foo</span>
<a class="btn btn-default btn-xs">foo</a> <a class="btn btn-default btn-xs">foo</a>
</li> </li>
@ -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-icon-ul"> <ul class="fa-ul">
<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-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-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-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-building fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-building fa-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-icon-ul lead"> <ul class="fa-ul lead">
<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-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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-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-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-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-icon-ul lead"> <ul class="fa-ul lead">
<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-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-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-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-building fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><i class="fa-li fa fa-building fa-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-icon-ul"> <ul class="fa-ul">
<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-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-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-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-building"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-li fa fa-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-icon-ul"> <ul class="fa-ul">
<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-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-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-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-building fa-icon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li><a href="#"><i class="fa-li fa fa-building fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -604,11 +604,11 @@ 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-icon-ul"> <ul class="fa-ul">
<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-refresh fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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. 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. <li><i class="fa-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa-icon fa-icon-building"></i> <i class="fa fa-building"></i>
<span class="label label-default">foo</span> <span class="label label-default">foo</span>
<a class="btn btn-default btn-xs">foo</a> <a class="btn btn-default btn-xs">foo</a>
</li> </li>
@ -617,11 +617,11 @@ 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-icon-ul"> <ul class="fa-ul">
<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-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-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. 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. <li><i class="fa-li fa fa-spinner fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa-icon fa-icon-building"></i> <i class="fa fa-building"></i>
<span class="label label-default">foo</span> <span class="label label-default">foo</span>
<a class="btn btn-default btn-xs">foo</a> <a class="btn btn-default btn-xs">foo</a>
</li> </li>
@ -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-icon fa-icon-refresh fa-icon-spin"></i> Loading... <i class="fa fa-refresh fa-spin"></i> Loading...
<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"><i class="fa fa-refresh fa-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-icon fa-icon-circle-blank fa-icon-spin"></i> Loading... <i class="fa fa-circle-blank fa-spin"></i> Loading...
<button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...</button> <button class="btn btn-default btn-sm"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
<a href="#"><i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading...</a> <a href="#"><i class="fa fa-refresh fa-spin"></i> Loading...</a>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading... <i class="fa fa-refresh fa-spin"></i> Loading...
<button class="btn btn-default"><i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading...</button> <button class="btn btn-default"><i class="fa fa-refresh fa-spin"></i> Loading...</button>
<button class="btn btn-default">Loading...</button> <button class="btn btn-default">Loading...</button>
<i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading... <i class="fa fa-circle-blank fa-spin"></i> Loading...
<button class="btn btn-default"><i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...</button> <button class="btn btn-default"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa-icon fa-icon-spinner fa-icon-spin"></i> Loading... <i class="fa fa-spinner fa-spin"></i> Loading...
<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"><i class="fa fa-spinner fa-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-icon fa-icon-circle-blank fa-icon-spin"></i> Loading... <i class="fa fa-circle-blank fa-spin"></i> Loading...
<button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...</button> <button class="btn btn-default btn-lg"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
</div> </div>
<h4>fa-icon-lg</h4> <h4>fa-lg</h4>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa-icon fa-icon-refresh fa-icon-lg fa-icon-spin"></i> Loading... <i class="fa fa-refresh fa-lg fa-spin"></i> Loading...
<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"><i class="fa fa-refresh fa-lg fa-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-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading... <i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...
<button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...</button> <button class="btn btn-default btn-sm"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa-icon fa-icon-refresh fa-icon-lg fa-icon-spin"></i> Loading... <i class="fa fa-refresh fa-lg fa-spin"></i> Loading...
<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"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button>
<button class="btn btn-default">Loading...</button> <button class="btn btn-default">Loading...</button>
<i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading... <i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...
<button class="btn btn-default"><i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...</button> <button class="btn btn-default"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button>
</div> </div>
<div style="border: solid 1px #d3d3d3;"> <div style="border: solid 1px #d3d3d3;">
<i class="fa-icon fa-icon-spinner fa-icon-lg fa-icon-spin"></i> Loading... <i class="fa fa-spinner fa-lg fa-spin"></i> Loading...
<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"><i class="fa fa-spinner fa-lg fa-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-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading... <i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...
<button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...</button> <button class="btn btn-default btn-lg"><i class="fa fa-circle-blank fa-lg fa-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-icon fa-icon-spinner fa-icon-spin"></i></span> <span class="input-group-addon"><i class="fa fa-spinner fa-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-icon fa-icon-spinner fa-icon-spin"></i></span> <span class="input-group-addon"><i class="fa fa-spinner fa-spin"></i></span>
</div> </div>
</div> </div>
</div> </div>

2
src/whats-new.html
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-icon fa-icon-lightbulb-alt"></i>&nbsp; What's New{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-lightbulb-alt"></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 %}