doc changes to match new default icon class fa

_config.yml

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

less/variables.less

@@ -1,9 +1,9 @@
 // Variables
 // --------------------------
 
-@fa-css-prefix:       fa-icon;
 @fa-font-path:        "../fonts";
 //@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-border-color:     #eee;
 @fa-icon-muted:       #eee;

scss/_variables.scss

@@ -1,9 +1,9 @@
 // Variables
 // --------------------------
 
-$fa-css-prefix:       fa;
 $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-css-prefix:       fa;
 $fa-version:          "4.0.0" !default;
 $fa-border-color:     #eee !default;
 $fa-icon-muted:       #eee !default;

src/_includes/community/requesting-new-icons.html

@@ -21,7 +21,7 @@
     </li>
     <li>
       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>
   </ol>
 </section>

src/_includes/examples/animated-spinner.html

@@ -3,24 +3,24 @@
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <p>
-        Use the <code>fa-icon-spin</code> class to get any icon to rotate. Works well with <code>fa-icon-spinner</code>,
-        <code>fa-icon-refresh</code>, and <code>fa-icon-cog</code>.
+        Use the <code>fa-spin</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>,
+        <code>fa-refresh</code>, and <code>fa-cog</code>.
       </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-icon fa-icon-refresh fa-icon-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-spinner fa-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 fa-cog fa-spin"></i></button>
       </p>
     </div>
     <div class="col-md-9 col-sm-8">
       <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>
 {% 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 %}
       <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>
     </div>
   </div>

src/_includes/examples/bordered-pulled.html

@@ -3,29 +3,29 @@
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <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.
       </p>
     </div>
     <div class="col-md-9 col-sm-8">
       <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.
         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.
       </div>
 {% 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.
 {% endhighlight %}
       <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.
         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.
       </div>
 {% 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.
 {% endhighlight %}
     </div>

src/_includes/examples/button-dropdowns.html

@@ -3,13 +3,13 @@
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <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="#">
-          <span class="fa-icon fa-icon-caret-down"></span></a>
+          <span class="fa fa-caret-down"></span></a>
         <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-icon fa-icon-trash-alt fa-icon-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-pencil fa-fixed-width"></i> Edit</a></li>
+          <li><a href="#"><i class="fa fa-trash-alt fa-fixed-width"></i> Delete</a></li>
+          <li><a href="#"><i class="fa fa-ban fa-fixed-width"></i> Ban</a></li>
           <li class="divider"></li>
           <li><a href="#"><i class="i"></i> Make admin</a></li>
         </ul>
@@ -18,19 +18,19 @@
     <div class="col-md-9 col-sm-8">
 {% highlight html %}
 <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="#">
-    <span class="fa-icon fa-icon-caret-down"></span></a>
+    <span class="fa fa-caret-down"></span></a>
   <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-icon fa-icon-trash fa-icon-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-pencil fa-fixed-width"></i> Edit</a></li>
+    <li><a href="#"><i class="fa fa-trash fa-fixed-width"></i> Delete</a></li>
+    <li><a href="#"><i class="fa fa-ban fa-fixed-width"></i> Ban</a></li>
     <li class="divider"></li>
     <li><a href="#"><i class="i"></i> Make admin</a></li>
   </ul>
 </div>
 {% 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>
 </section>

src/_includes/examples/button-groups.html

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

src/_includes/examples/buttons.html

@@ -4,53 +4,53 @@
     <div class="col-md-3 col-sm-4">
       <p>
         <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="#">
-          <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>
         <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="#">
-          <i class="fa-icon fa-icon-info-circle"></i> Info</a>
+          <i class="fa fa-info-circle"></i> Info</a>
       </p>
       <p>
         <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="#">
-          <i class="fa-icon fa-icon-cog"></i> Settings</a>
+          <i class="fa fa-cog"></i> Settings</a>
       </p>
       <p>
         <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>
         <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>
     </div>
     <div class="col-md-9 col-sm-8">
       <p>
         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>
 {% highlight html %}
 <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="#">
-  <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="#">
-  <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="#">
-  <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="#">
-  <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="#">
-  <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="#">
-  <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="#">
-  <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 %}
     </div>
   </div>

src/_includes/examples/form-inputs.html

@@ -3,12 +3,12 @@
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <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">
       </div>
       <br>
       <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">
       </div>
     </div>
@@ -16,11 +16,11 @@
 {% highlight html %}
 <form>
   <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">
   </div>
   <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">
   </div>
 </form>

src/_includes/examples/inline-icons.html

@@ -7,13 +7,13 @@
     <div class="col-md-9 col-sm-8">
       <div class="well well-transparent">
         <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>
 {% 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 %}
-      <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>
 </section>

src/_includes/examples/larger-icons.html

@@ -3,31 +3,31 @@
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <p>
-        To increase the size of icons relative to its container, use <code>fa-icon-lg</code>, <code>fa-icon-2x</code>,
-        <code>fa-icon-3x</code>, or <code>fa-icon-4x</code>.
+        To increase the size of icons relative to its container, use <code>fa-lg</code>, <code>fa-2x</code>,
+        <code>fa-3x</code>, or <code>fa-4x</code>.
       </p>
     </div>
     <div class="col-md-9 col-sm-8">
       <p>
-        Increase the icon size by using the <code>fa-icon-lg</code> (33% increase), <code>fa-icon-2x</code>,
-        <code>fa-icon-3x</code>, or <code>fa-icon-4x</code> classes.
+        Increase the icon size by using the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
+        <code>fa-3x</code>, or <code>fa-4x</code> classes.
       </p>
       <div class="well well-transparent">
         <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-icon fa-icon-camera-retro fa-icon-2x"></i> fa-icon-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-icon fa-icon-camera-retro fa-icon-4x"></i> fa-icon-camera-retro</p>
+          <p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
+          <p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
+          <p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
+          <p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
         </div>
       </div>
 {% highlight html %}
-<p><i class="fa-icon fa-icon-camera-retro fa-icon-lg"></i> fa-icon-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-icon fa-icon-camera-retro fa-icon-3x"></i> fa-icon-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-lg"></i> fa-camera-retro</p>
+<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
+<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
+<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
 {% endhighlight %}
       <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.
       </div>
     </div>

src/_includes/examples/list-bullets.html

@@ -2,28 +2,28 @@
   <h2 class="page-header">List Bullets</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
-      <ul class="fa-icon-ul">
-        <li><i class="fa-icon-li fa-icon fa-icon-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-icon-li fa-icon fa-icon-check"></i>Button groups</li>
-        <li><i class="fa-icon-li fa-icon fa-icon-check"></i>Navigation</li>
-        <li><i class="fa-icon-li fa-icon fa-icon-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>
+      <ul class="fa-ul">
+        <li><i class="fa-li fa fa-check"></i>List bullets (like these)</li>
+        <li><i class="fa-li fa fa-check"></i>Buttons</li>
+        <li><i class="fa-li fa fa-check"></i>Button groups</li>
+        <li><i class="fa-li fa fa-check"></i>Navigation</li>
+        <li><i class="fa-li fa fa-check"></i>Prepended form inputs</li>
+        <li><i class="fa-li fa fa-check"></i>&hellip;and many more with custom CSS</li>
       </ul>
     </div>
     <div class="col-md-9 col-sm-8">
       <p>Easily replace individual list bullets.</p>
 {% highlight html %}
-<ul class="fa-icon-ul">
-  <li><i class="fa-icon-li fa-icon fa-icon-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-icon-li fa-icon fa-icon-check"></i>Button groups</li>
-  <li><i class="fa-icon-li fa-icon fa-icon-check"></i>Navigation</li>
-  <li><i class="fa-icon-li fa-icon fa-icon-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>
+<ul class="fa-ul">
+  <li><i class="fa-li fa fa-check"></i>Bulleted lists (like this one)</li>
+  <li><i class="fa-li fa fa-check"></i>Buttons</li>
+  <li><i class="fa-li fa fa-check"></i>Button groups</li>
+  <li><i class="fa-li fa fa-check"></i>Navigation</li>
+  <li><i class="fa-li fa fa-check"></i>Prepended form inputs</li>
+  <li><i class="fa-li fa fa-check"></i>&hellip;and many more with custom CSS</li>
 </ul>
 {% 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>
 </section>

src/_includes/examples/navigation.html

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

src/_includes/examples/new.html

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

src/_includes/examples/rotated-flipped.html

@@ -6,23 +6,23 @@
     </div>
     <div class="col-md-9 col-sm-8">
       <div class="well well-large well-transparent lead">
-        <i class="fa-icon fa-icon-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-icon fa-icon-shield fa-icon-rotate-180"></i>&nbsp; fa-icon-rotate-180<br>
-        <i class="fa-icon fa-icon-shield fa-icon-rotate-270"></i>&nbsp; fa-icon-rotate-270<br>
-        <i class="fa-icon fa-icon-shield fa-icon-flip-horizontal"></i>&nbsp; fa-icon-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"></i>&nbsp; normal<br>
+        <i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
+        <i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
+        <i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
+        <i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
+        <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
       </div>
 {% highlight html %}
-<i class="fa-icon fa-icon-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-icon fa-icon-shield fa-icon-rotate-180"></i>&nbsp; fa-icon-rotate-180<br>
-<i class="fa-icon fa-icon-shield fa-icon-rotate-270"></i>&nbsp; fa-icon-rotate-270<br>
-<i class="fa-icon fa-icon-shield fa-icon-flip-horizontal"></i>&nbsp; fa-icon-flip-horizontal<br>
-<i class="fa-icon fa-icon-shield fa-icon-flip-vertical"></i>&nbsp; icon-flip-vertical
+<i class="fa fa-shield"></i>&nbsp; normal<br>
+<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
+<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
+<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
+<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
+<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical
 {% endhighlight %}
       <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>
     </div>
   </div>

src/_includes/examples/stacked.html

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

src/_includes/footer.html

@@ -1,7 +1,7 @@
 <footer id="footer" class="footer hidden-print">
   <div class="container text-center">
     <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">
       Created and Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
     </div>
@@ -13,7 +13,7 @@
       Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a>
     </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 class="project">
       <a href="{{ site.fontawesome.github.url }}">GitHub Project</a> &middot;

src/_includes/icons/brand.html

@@ -9,7 +9,7 @@
     {% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %}
 
     {% 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 %}
   </div>
 </section>

src/_includes/icons/currency.html

@@ -5,7 +5,7 @@
     {% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %}
 
     {% 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 %}
   </div>
 

src/_includes/icons/directional.html

@@ -5,7 +5,7 @@
     {% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %}
 
     {% 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 %}
   </div>
 

src/_includes/icons/medical.html

@@ -5,7 +5,7 @@
     {% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %}
 
     {% 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 %}
   </div>
 

src/_includes/icons/new.html

@@ -11,7 +11,7 @@
     {% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version %}
 
     {% 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 %}
   </div>
 

src/_includes/icons/text-editor.html

@@ -5,7 +5,7 @@
     {% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %}
 
     {% 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 %}
   </div>
 

src/_includes/icons/video-player.html

@@ -5,7 +5,7 @@
     {% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %}
 
     {% 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 %}
   </div>
 

src/_includes/icons/web-application.html

@@ -5,7 +5,7 @@
     {% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %}
 
     {% 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 %}
   </div>
 

src/_includes/jumbotron-carousel.html

@@ -7,7 +7,7 @@
         <div class="actions">
           <a class="btn btn-default btn-lg" href="{{ page.relative_path }}assets/font-awesome.zip"
              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
           </a>
         </div>
@@ -23,26 +23,26 @@
         <div id="icon-carousel" class="carousel slide">
           <!-- Carousel items -->
           <div class="carousel-inner">
-            <div class="active item"><div><i class="fa-icon fa-icon-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-icon fa-icon-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-icon fa-icon-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-icon fa-icon-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-icon fa-icon-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-icon fa-icon-heart-alt"></i></div></div>
-            <div class="item"><div><i class="fa-icon fa-icon-thumbs-up-alt"></i></div></div>
+            <div class="active item"><div><i class="fa fa-flag"></i></div></div>
+            <div class="item"><div><i class="fa fa-compass"></i></div></div>
+            <div class="item"><div><i class="fa fa-rocket"></i></div></div>
+            <div class="item"><div><i class="fa fa-shield"></i></div></div>
+            <div class="item"><div><i class="fa fa-star-half-empty"></i></div></div>
+            <div class="item"><div><i class="fa fa-envelope-alt"></i></div></div>
+            <div class="item"><div><i class="fa fa-medkit"></i></div></div>
+            <div class="item"><div><i class="fa fa-book"></i></div></div>
+            <div class="item"><div><i class="fa fa-fighter-jet"></i></div></div>
+            <div class="item"><div><i class="fa fa-beer"></i></div></div>
+            <div class="item"><div><i class="fa fa-heart-alt"></i></div></div>
+            <div class="item"><div><i class="fa fa-thumbs-up-alt"></i></div></div>
           </div>
           <!-- Carousel nav -->
           <a class="carousel-control left" href="#icon-carousel" data-slide="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"
              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>

src/_includes/navbar.html

@@ -7,35 +7,41 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </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 class="navbar-collapse collapse">
       <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 == "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 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 %}">
           <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>
           <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><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/#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/#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/#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/#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/#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/#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/#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/#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 fa-camera-retro fa-fixed-width"></i>&nbsp; Web Application 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 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 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 fa-play-circle fa-fixed-width"></i>&nbsp; Video Player 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 fa-medkit fa-fixed-width"></i>&nbsp; Medical Icons</a></li>
           </ul>
         </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 %}">
           <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>
           <ul class="dropdown-menu pull-right">
             <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>
           </ul>
         </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 == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
       </ul>

src/_includes/new-features.html

@@ -10,27 +10,27 @@
 <section id="whats-new" class="feature-list">
   <div class="row">
     <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.
     </div>
     <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.
     </div>
     <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.
     </div>
     <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.
     </div>
     <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.
     </div>
     <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>.
     </div>
   </div>

src/_includes/new-naming.html

@@ -1,6 +1,6 @@
 <section id="new-naming">
   <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>
     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
@@ -8,110 +8,110 @@
   </p>
   <div class="row">
     <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>
-      <ul class="fa-icon-ul padding-left-sm">
+      <ul class="fa-ul padding-left-sm">
         <li>
-          <i class="fa-icon fa-icon-bookmark fa-icon-li"></i>
-          fa-icon-bookmark
+          <i class="fa fa-bookmark fa-li"></i>
+          fa-bookmark
         </li>
         <li>
-          <i class="fa-icon fa-icon-comment fa-icon-li"></i>
-          fa-icon-comment
+          <i class="fa fa-comment fa-li"></i>
+          fa-comment
         </li>
         <li>
-          <i class="fa-icon fa-icon-folder fa-icon-li"></i>
-          fa-icon-folder
+          <i class="fa fa-folder fa-li"></i>
+          fa-folder
         </li>
       </ul>
     </div>
     <div class="col-md-4 col-sm-6">
       <h4 class="margin-bottom-sm">*-alt</h4>
       <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>
-          <i class="fa-icon fa-icon-bookmark-alt fa-icon-li"></i>
-          fa-icon-bookmark-alt
+          <i class="fa fa-bookmark-alt fa-li"></i>
+          fa-bookmark-alt
         </li>
         <li>
-          <i class="fa-icon fa-icon-comment-alt fa-icon-li"></i>
-          fa-icon-comment-alt
+          <i class="fa fa-comment-alt fa-li"></i>
+          fa-comment-alt
         </li>
         <li>
-          <i class="fa-icon fa-icon-folder-alt fa-icon-li"></i>
-          fa-icon-folder-alt
+          <i class="fa fa-folder-alt fa-li"></i>
+          fa-folder-alt
         </li>
       </ul>
     </div>
     <div class="col-md-4 col-sm-6">
       <h4 class="margin-bottom-sm">*-circle</h4>
       <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>
-          <i class="fa-icon fa-icon-check-circle fa-icon-li"></i>
-          fa-icon-check-circle
+          <i class="fa fa-check-circle fa-li"></i>
+          fa-check-circle
         </li>
         <li>
-          <i class="fa-icon fa-icon-exclamation-circle fa-icon-li"></i>
-          fa-icon-exclamation-circle
+          <i class="fa fa-exclamation-circle fa-li"></i>
+          fa-exclamation-circle
         </li>
         <li>
-          <i class="fa-icon fa-icon-plus-circle fa-icon-li"></i>
-          fa-icon-plus-circle
+          <i class="fa fa-plus-circle fa-li"></i>
+          fa-plus-circle
         </li>
       </ul>
     </div>
     <div class="col-md-4 col-sm-6">
       <h4 class="margin-bottom-sm">*-square</h4>
       <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>
-          <i class="fa-icon fa-icon-check-square fa-icon-li"></i>
-          fa-icon-check-square
+          <i class="fa fa-check-square fa-li"></i>
+          fa-check-square
         </li>
         <li>
-          <i class="fa-icon fa-icon-twitter-square fa-icon-li"></i>
-          fa-icon-twitter-square
+          <i class="fa fa-twitter-square fa-li"></i>
+          fa-twitter-square
         </li>
         <li>
-          <i class="fa-icon fa-icon-plus-square fa-icon-li"></i>
-          fa-icon-plus-square
+          <i class="fa fa-plus-square fa-li"></i>
+          fa-plus-square
         </li>
       </ul>
     </div>
     <div class="col-md-4 col-sm-6">
       <h4 class="margin-bottom-sm">*-right, *-up, etc.</h4>
       <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>
-          <i class="fa-icon fa-icon-arrow-right fa-icon-li"></i>
-          fa-icon-arrow-right
+          <i class="fa fa-arrow-right fa-li"></i>
+          fa-arrow-right
         </li>
         <li>
-          <i class="fa-icon fa-icon-arrow-circle-right fa-icon-li"></i>
-          fa-icon-arrow-circle-right
+          <i class="fa fa-arrow-circle-right fa-li"></i>
+          fa-arrow-circle-right
         </li>
         <li>
-          <i class="fa-icon fa-icon-angle-double-right fa-icon-li"></i>
-          fa-icon-angle-double-right
+          <i class="fa fa-angle-double-right fa-li"></i>
+          fa-angle-double-right
         </li>
       </ul>
     </div>
     <div class="col-md-4 col-sm-6">
       <h4 class="margin-bottom-sm">Combine 'em up...</h4>
       <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>
-          <i class="fa-icon fa-icon-arrow-circle-alt-right fa-icon-li"></i>
-          fa-icon-arrow-circle-alt-right
+          <i class="fa fa-arrow-circle-alt-right fa-li"></i>
+          fa-arrow-circle-alt-right
         </li>
         <li>
-          <i class="fa-icon fa-icon-caret-square-alt-right fa-icon-li"></i>
-          fa-icon-caret-square-alt-right
+          <i class="fa fa-caret-square-alt-right fa-li"></i>
+          fa-caret-square-alt-right
         </li>
         <li>
-          <i class="fa-icon fa-icon-hand-alt-right fa-icon-li"></i>
-          fa-icon-hand-alt-right
+          <i class="fa fa-hand-alt-right fa-li"></i>
+          fa-hand-alt-right
         </li>
       </ul>
     </div>

src/_includes/tests/rotated-flipped-inside-anchor.html

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

src/_includes/tests/rotated-flipped-inside-btn.html

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

src/_includes/tests/rotated-flipped.html

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

src/_includes/tests/stacked-inside-anchor.html

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

src/_includes/tests/stacked.html

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

src/_includes/thanks-to.html

@@ -17,7 +17,7 @@
     </div>
     <div class="col-md-4 col-sm-4">
       <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="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome.
       </p>

src/_includes/why.html

@@ -1,36 +1,36 @@
 <section id="why" class="feature-list">
   <div class="row">
     <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.
     </div>
     <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.
     </div>
     <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.
     </div>
     <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>.
     </div>
     <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.
     </div>
     <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>.
     </div>
     <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,
       check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
     </div>
     <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.
     </div>
   </div>

src/_layouts/icon.html

@@ -6,19 +6,19 @@ relative_path: ../../
 <div class="jumbotron jumbotron-icon">
   <div class="container">
     <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">
-        <i class="fa-icon fa-icon-{{ page.icon.id }} fa-icon-5"></i>&nbsp;&nbsp;
-        <span class="hide-sm"><i class="fa-icon fa-icon-{{ page.icon.id }} fa-icon-4"></i>&nbsp;&nbsp;</span>
-        <i class="fa-icon fa-icon-{{ page.icon.id }} fa-icon-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-5"></i>&nbsp;&nbsp;
+        <span class="hide-sm"><i class="fa fa-{{ page.icon.id }} fa-4"></i>&nbsp;&nbsp;</span>
+        <i class="fa fa-{{ page.icon.id }} fa-3"></i>&nbsp;&nbsp;
+        <i class="fa fa-{{ page.icon.id }} fa-2"></i>&nbsp;
       </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>
     <h1 class="info-class">
-      fa-icon-{{ page.icon.id }}
+      fa-{{ page.icon.id }}
       <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;
         Created: v{{ page.icon.created }} &middot;
         Categories:
@@ -29,7 +29,7 @@ relative_path: ../../
         {% if icon_alias_count > 0 %}
           &middot; Aliases:
           {% for alias in page.icon.aliases %}
-            fa-icon-{{ alias }}{% unless forloop.last %},{% endunless %}
+            fa-{{ alias }}{% unless forloop.last %},{% endunless %}
           {% endfor %}
         {% endif %}
       </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>
         <div class="well well-transparent">
           <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>
 {% 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 %}
         <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 class="col-md-3 col-sm-3">
         <div class="info-ad">{% include ads/carbon-light-vertical.html %}</div>

src/assets/font-awesome/less/variables.less

@@ -3,9 +3,9 @@
 // Variables
 // --------------------------
 
-@fa-css-prefix:       {{ site.fontawesome.css_prefix }};
 @fa-font-path:        "../fonts";
 //@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-border-color:     #eee;
 @fa-icon-muted:       #eee;

src/assets/font-awesome/scss/_variables.scss

@@ -3,9 +3,9 @@
 // Variables
 // --------------------------
 
-$fa-css-prefix:       {{ site.fontawesome.css_prefix }};
 $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-css-prefix:       {{ site.fontawesome.css_prefix }};
 $fa-version:          "{{ site.fontawesome.version }}" !default;
 $fa-border-color:     #eee !default;
 $fa-icon-muted:       #eee !default;

src/assets/less/site/bootstrap/jumbotron.less

@@ -58,11 +58,11 @@
       dd { margin-left: @component-offset-horizontal - 85; }
     }
   }
-  .fa-icon-2 { font-size: 2em; }
-  .fa-icon-3 { font-size: 4em; }
-  .fa-icon-4 { font-size: 7em; }
-  .fa-icon-5 { font-size: 12em; }
-  .fa-icon-6 { font-size: 20em; }
+  .fa-2 { font-size: 2em; }
+  .fa-3 { font-size: 4em; }
+  .fa-4 { font-size: 7em; }
+  .fa-5 { font-size: 12em; }
+  .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; }
 }

src/assets/less/site/bootstrap/navbar.less

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

src/assets/less/site/feature-list.less

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

src/assets/less/site/fontawesome-icon-list.less

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

src/assets/less/site/responsive/screen-xs.less

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

src/cheatsheet.html

@@ -3,7 +3,7 @@ layout: base
 title: Font Awesome Cheatsheet
 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 %}
 
 {% include jumbotron.html %}
@@ -23,8 +23,8 @@ relative_path: ../
   <div class="row">
     {% for icon in icons %}
     <div class="col-md-4 col-sm-6">
-      <i class="fa-icon fa-icon-fixed-width">&#x{{ icon.unicode }}</i>
-      fa-icon-{{ icon.id }}
+      <i class="fa fa-fixed-width">&#x{{ icon.unicode }}</i>
+      fa-{{ icon.id }}
       <span class="muted">(&amp;#x{{ icon.unicode }};)</span>
     </div>
     {% endfor %}

src/community.html

@@ -4,7 +4,7 @@ title: The Font Awesome Community
 navbar_active: community
 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 %}
 
 {% include jumbotron.html %}

src/examples.html

@@ -4,7 +4,7 @@ title: Font Awesome Examples
 navbar_active: examples
 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 %}
 
 {% include jumbotron.html %}

src/get-started.html

@@ -4,7 +4,7 @@ title: Get Started with Font Awesome
 navbar_active: get-started
 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 %}
 
 {% include jumbotron.html %}
@@ -93,7 +93,7 @@ $ gem install font-awesome-sass
 {% highlight scss %}
 @fa-font-path:   "../font";
 {% 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>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>

src/icons.html

@@ -4,7 +4,7 @@ title: Font Awesome Icons
 navbar_active: icons
 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 %}
 
 {% include jumbotron.html %}

src/license.html

@@ -4,7 +4,7 @@ title: Font Awesome License
 navbar_active: license
 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 %}
 
 {% include jumbotron.html %}
@@ -21,9 +21,9 @@ relative_path: ../
 
   <section>
     <div class="alert alert-success">
-      <ul class="fa-icon-ul margin-bottom-none">
+      <ul class="fa-ul margin-bottom-none">
         <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".
         </li>
       </ul>

src/test.html

@@ -11,67 +11,67 @@ relative_path: ../
   <div class="row">
     <div class="col-md-3">
       <div class="well">
-        <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="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 class="col-md-3">
-      <i class="fa-icon fa-icon-building"></i> Building
+      <i class="fa fa-building"></i> Building
     </div>
     <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 class="row" style="font-size: 24px; line-height: 1.5em;">
     <div class="col-md-4">
       <div class="well">
-        <i class="fa-icon fa-icon-building"></i> Building
+        <i class="fa fa-building"></i> Building
       </div>
     </div>
     <div class="col-md-4">
       <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 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 class="row">
     <div class="col-md-3">
       <div class="well">
-        <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="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 class="col-md-3">
-      <i class="fa-icon fa-icon-circle"></i> Circle
+      <i class="fa fa-circle"></i> Circle
     </div>
     <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 class="row" style="font-size: 24px; line-height: 1.5em;">
     <div class="col-md-4">
       <div class="well">
-        <i class="fa-icon fa-icon-circle"></i> Circle
+        <i class="fa fa-circle"></i> Circle
       </div>
     </div>
     <div class="col-md-4">
       <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 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>
 
@@ -79,42 +79,42 @@ relative_path: ../
   <h3>Links with Icons <small>icon should activate link & NOT underline</small></h3>
   <div class="row lead">
     <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 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 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 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 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 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 class="row">
     <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 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 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 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 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 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>
 
@@ -122,23 +122,23 @@ relative_path: ../
   <h3>Navbar  <small>should stay same height </small></h3>
   <div class="navbar navbar-inverse navbar-static-top">
     <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">
         <li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li>
         <li class="dropdown" style="border: solid 1px white;">
           <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
             Nav Item 2
-            <i class="fa-icon fa-icon-caret-down"></i>
+            <i class="fa fa-caret-down"></i>
           </a>
           <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-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li>
+            <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
+            <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li>
           </ul>
         </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-icon fa-icon-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-icon fa-icon-circle"></i> Nav Item 6</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 fa-envelope"></i> Nav Item 4</a></li>
+        <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle fa-lg"></i> Nav Item 5</a></li>
+        <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 6</a></li>
       </ul>
     </div>
   </div>
@@ -151,23 +151,23 @@ relative_path: ../
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
           <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-icon fa-icon-building"></i></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 fa-building"></i></button>
         </div>
         <div>
           <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-icon fa-icon-building"></i></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 fa-building"></i></button>
         </div>
         <div>
           <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-icon fa-icon-building"></i></button>
+          <button class="btn btn-default"><i class="fa fa-building"></i> Button</button>
+          <button class="btn btn-default"><i class="fa fa-building"></i></button>
         </div>
         <div>
           <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-icon fa-icon-building"></i></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 fa-building"></i></button>
         </div>
       </div>
     </div>
@@ -175,23 +175,23 @@ relative_path: ../
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
           <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-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</button>
+          <button class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i></button>
         </div>
         <div>
           <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-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</button>
+          <button class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i></button>
         </div>
         <div>
           <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-icon fa-icon-building fa-icon-lg"></i></button>
+          <button class="btn btn-default"><i class="fa fa-building fa-lg"></i> Button</button>
+          <button class="btn btn-default"><i class="fa fa-building fa-lg"></i></button>
         </div>
         <div>
           <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-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</button>
+          <button class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i></button>
         </div>
       </div>
     </div>
@@ -201,23 +201,23 @@ relative_path: ../
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
           <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-icon fa-icon-circle"></i></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 fa-circle"></i></button>
         </div>
         <div>
           <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-icon fa-icon-circle"></i></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 fa-circle"></i></button>
         </div>
         <div>
           <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-icon fa-icon-circle"></i></button>
+          <button class="btn btn-default"><i class="fa fa-circle"></i> Button</button>
+          <button class="btn btn-default"><i class="fa fa-circle"></i></button>
         </div>
         <div>
           <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-icon fa-icon-circle"></i></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 fa-circle"></i></button>
         </div>
       </div>
     </div>
@@ -225,23 +225,23 @@ relative_path: ../
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
           <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-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</button>
+          <button class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i></button>
         </div>
         <div>
           <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-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</button>
+          <button class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i></button>
         </div>
         <div>
           <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-icon fa-icon-circle fa-icon-lg"></i></button>
+          <button class="btn btn-default"><i class="fa fa-circle fa-lg"></i> Button</button>
+          <button class="btn btn-default"><i class="fa fa-circle fa-lg"></i></button>
         </div>
         <div>
           <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-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</button>
+          <button class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i></button>
         </div>
       </div>
     </div>
@@ -254,23 +254,23 @@ relative_path: ../
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
           <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-icon fa-icon-building"></i></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 fa-building"></i></a>
         </div>
         <div>
           <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-icon fa-icon-building"></i></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 fa-building"></i></a>
         </div>
         <div>
           <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-icon fa-icon-building"></i></a>
+          <a class="btn btn-default"><i class="fa fa-building"></i> Button</a>
+          <a class="btn btn-default"><i class="fa fa-building"></i></a>
         </div>
         <div>
           <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-icon fa-icon-building"></i></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 fa-building"></i></a>
         </div>
       </div>
     </div>
@@ -278,23 +278,23 @@ relative_path: ../
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
           <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-icon fa-icon-building fa-icon-lg"></i></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 fa-building fa-lg"></i></a>
         </div>
         <div>
           <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-icon fa-icon-building fa-icon-lg"></i></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 fa-building fa-lg"></i></a>
         </div>
         <div>
           <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-icon fa-icon-building fa-icon-lg"></i></a>
+          <a class="btn btn-default"><i class="fa fa-building fa-lg"></i> Button</a>
+          <a class="btn btn-default"><i class="fa fa-building fa-lg"></i></a>
         </div>
         <div>
           <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-icon fa-icon-building fa-icon-lg"></i></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 fa-building fa-lg"></i></a>
         </div>
       </div>
     </div>
@@ -304,23 +304,23 @@ relative_path: ../
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
           <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-icon fa-icon-circle"></i></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 fa-circle"></i></a>
         </div>
         <div>
           <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-icon fa-icon-circle"></i></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 fa-circle"></i></a>
         </div>
         <div>
           <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-icon fa-icon-circle"></i></a>
+          <a class="btn btn-default"><i class="fa fa-circle"></i> Button</a>
+          <a class="btn btn-default"><i class="fa fa-circle"></i></a>
         </div>
         <div>
           <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-icon fa-icon-circle"></i></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 fa-circle"></i></a>
         </div>
       </div>
     </div>
@@ -328,23 +328,23 @@ relative_path: ../
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
           <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-icon fa-icon-circle fa-icon-lg"></i></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 fa-circle fa-lg"></i></a>
         </div>
         <div>
           <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-icon fa-icon-circle fa-icon-lg"></i></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 fa-circle fa-lg"></i></a>
         </div>
         <div>
           <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-icon fa-icon-circle fa-icon-lg"></i></a>
+          <a class="btn btn-default"><i class="fa fa-circle fa-lg"></i> Button</a>
+          <a class="btn btn-default"><i class="fa fa-circle fa-lg"></i></a>
         </div>
         <div>
           <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-icon fa-icon-circle fa-icon-lg"></i></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 fa-circle fa-lg"></i></a>
         </div>
       </div>
     </div>
@@ -356,7 +356,7 @@ relative_path: ../
       <div style="border: solid 1px #d3d3d3;">
         <div class="btn-group">
             <button class="btn btn-default btn-lg">
-                <i class="fa-icon fa-icon-adjust"></i>
+                <i class="fa fa-adjust"></i>
             </button>
             <button class="btn btn-default btn-lg">
                 Text
@@ -368,7 +368,7 @@ relative_path: ../
       <div style="border: solid 1px #d3d3d3;">
         <div class="btn-group">
             <button class="btn btn-default">
-                <i class="fa-icon fa-icon-adjust"></i>
+                <i class="fa fa-adjust"></i>
             </button>
             <button class="btn btn-default">
                 Text
@@ -380,7 +380,7 @@ relative_path: ../
       <div style="border: solid 1px #d3d3d3;">
         <div class="btn-group">
             <button class="btn btn-default btn-sm">
-                <i class="fa-icon fa-icon-adjust"></i>
+                <i class="fa fa-adjust"></i>
             </button>
             <button class="btn btn-default btn-sm">
                 Text
@@ -395,7 +395,7 @@ relative_path: ../
     <div class="col-md-4">
       <div style="border: solid 1px #d3d3d3;">
         <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>
         <a class="btn btn-default btn-lg" href="#">
           Longer<br>Button</a>
@@ -404,7 +404,7 @@ relative_path: ../
     <div class="col-md-4">
       <div style="border: solid 1px #d3d3d3;">
         <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>
         <a class="btn btn-default" href="#">
           Longer<br>Button</a>
@@ -413,7 +413,7 @@ relative_path: ../
     <div class="col-md-4">
       <div style="border: solid 1px #d3d3d3;">
         <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>
         <a class="btn btn-default btn-sm" href="#">
           Longer<br>Button</a>
@@ -430,63 +430,63 @@ relative_path: ../
         <li class="dropdown active">
           <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
             Nav Item 2
-            <i class="fa-icon fa-icon-caret-down"></i>
+            <i class="fa fa-caret-down"></i>
           </a>
           <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-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li>
+            <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
+            <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li>
           </ul>
         </li>
         <li class="dropdown active">
           <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
             Nav Item 3
-            <i class="fa-icon fa-icon-caret-down"></i>
+            <i class="fa fa-caret-down"></i>
           </a>
           <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-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li>
+            <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
+            <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li>
           </ul>
         </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-icon fa-icon-spinner fa-icon-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-icon fa-icon-circle"></i> Nav Item 7</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 fa-spinner fa-spin"></i> Nav Item 5</a></li>
+        <li class="active"><a href="#examples"><i class="fa fa-circle fa-lg"></i> Nav Item 6</a></li>
+        <li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li>
       </ul>
       <ul class="nav nav-tabs">
         <li class="active"><a href="#">Nav Item 1</a></li>
         <li class="dropdown active">
           <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
             Nav Item 2
-            <i class="fa-icon fa-icon-caret-down"></i>
+            <i class="fa fa-caret-down"></i>
           </a>
           <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-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li>
+            <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
+            <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li>
           </ul>
         </li>
         <li class="dropdown active">
           <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
             Nav Item 3
-            <i class="fa-icon fa-icon-caret-down"></i>
+            <i class="fa fa-caret-down"></i>
           </a>
           <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-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li>
+            <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
+            <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li>
           </ul>
         </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-icon fa-icon-spinner fa-icon-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-icon fa-icon-circle"></i> Nav Item 7</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 fa-spinner fa-spin"></i> Nav Item 5</a></li>
+        <li class="active"><a href="#examples"><i class="fa fa-circle fa-lg"></i> Nav Item 6</a></li>
+        <li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li>
       </ul>
     </div>
     <div class="col-md-3">
       <div class="list-group">
         <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 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>
       </div>
     </div>
@@ -496,11 +496,11 @@ relative_path: ../
   <div class="row">
     <div class="col-md-6">
       <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 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>
 
@@ -509,28 +509,28 @@ relative_path: ../
   <div class="row">
     <div class="col-md-6">
       <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.
       </p>
     </div>
     <div class="col-md-6">
       <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.
       </p>
     </div>
   </div>
   <div class="row">
     <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.
     </div>
     <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.
     </div>
     <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.
     </div>
   </div>
@@ -540,11 +540,11 @@ relative_path: ../
   <div class="row">
     <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fa-icon-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-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-icon-li fa-icon fa-icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            <i class="fa-icon fa-icon-building"></i>
+        <ul class="fa-ul">
+          <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><i class="fa-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-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            <i class="fa fa-building"></i>
             <span class="label label-default">foo</span>
             <a class="btn btn-default btn-xs">foo</a>
           </li>
@@ -553,10 +553,10 @@ relative_path: ../
     </div>
     <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fa-icon-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-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-icon-li fa-icon fa-icon-building fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+        <ul class="fa-ul">
+          <li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><i class="fa-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-li fa fa-building fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
         </ul>
       </div>
     </div>
@@ -564,19 +564,19 @@ relative_path: ../
   <div class="row">
     <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fa-icon-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-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-icon-li fa-icon fa-icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+        <ul class="fa-ul lead">
+          <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><i class="fa-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-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
         </ul>
       </div>
     </div>
     <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fa-icon-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-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-icon-li fa-icon fa-icon-building fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+        <ul class="fa-ul lead">
+          <li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><i class="fa-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-li fa fa-building fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
         </ul>
       </div>
     </div>
@@ -584,19 +584,19 @@ relative_path: ../
   <div class="row">
     <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fa-icon-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-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-icon-li fa-icon fa-icon-building"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+        <ul class="fa-ul">
+          <li><a href="#"><i class="fa-li fa fa-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><a href="#"><i class="fa-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-li fa fa-building"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
         </ul>
       </div>
     </div>
     <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fa-icon-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-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-icon-li fa-icon fa-icon-building fa-icon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+        <ul class="fa-ul">
+          <li><a href="#"><i class="fa-li fa fa-double-angle-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><a href="#"><i class="fa-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-li fa fa-building fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
         </ul>
       </div>
     </div>
@@ -604,11 +604,11 @@ relative_path: ../
   <div class="row">
     <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fa-icon-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-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-icon-li fa-icon fa-icon-spinner fa-icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            <i class="fa-icon fa-icon-building"></i>
+        <ul class="fa-ul">
+          <li><i class="fa-li fa fa-refresh fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><i class="fa-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-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            <i class="fa fa-building"></i>
             <span class="label label-default">foo</span>
             <a class="btn btn-default btn-xs">foo</a>
           </li>
@@ -617,11 +617,11 @@ relative_path: ../
     </div>
     <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
-        <ul class="fa-icon-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-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-icon-li fa-icon fa-icon-spinner fa-icon-spin fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            <i class="fa-icon fa-icon-building"></i>
+        <ul class="fa-ul">
+          <li><i class="fa-li fa fa-refresh fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><i class="fa-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-li fa fa-spinner fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            <i class="fa fa-building"></i>
             <span class="label label-default">foo</span>
             <a class="btn btn-default btn-xs">foo</a>
           </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>
   <div style="border: solid 1px #d3d3d3;">
-    <i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading...
-    <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading...</button>
+    <i class="fa fa-refresh fa-spin"></i> Loading...
+    <button class="btn btn-default btn-sm"><i class="fa fa-refresh fa-spin"></i> Loading...</button>
     <button class="btn btn-default btn-sm">Loading...</button>
-    <i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...
-    <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...</button>
-    <a href="#"><i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading...</a>
+    <i class="fa fa-circle-blank fa-spin"></i> Loading...
+    <button class="btn btn-default btn-sm"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
+    <a href="#"><i class="fa fa-refresh fa-spin"></i> Loading...</a>
   </div>
   <div style="border: solid 1px #d3d3d3;">
-    <i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading...
-    <button class="btn btn-default"><i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading...</button>
+    <i class="fa fa-refresh fa-spin"></i> Loading...
+    <button class="btn btn-default"><i class="fa fa-refresh fa-spin"></i> Loading...</button>
     <button class="btn btn-default">Loading...</button>
-    <i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...
-    <button class="btn btn-default"><i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...</button>
+    <i class="fa fa-circle-blank fa-spin"></i> Loading...
+    <button class="btn btn-default"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
   </div>
   <div style="border: solid 1px #d3d3d3;">
-    <i class="fa-icon fa-icon-spinner fa-icon-spin"></i> Loading...
-    <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-spinner fa-icon-spin"></i> Loading...</button>
+    <i class="fa fa-spinner fa-spin"></i> Loading...
+    <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i> Loading...</button>
     <button class="btn btn-default btn-lg">Loading...</button>
-    <i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...
-    <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...</button>
+    <i class="fa fa-circle-blank fa-spin"></i> Loading...
+    <button class="btn btn-default btn-lg"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
   </div>
-  <h4>fa-icon-lg</h4>
+  <h4>fa-lg</h4>
   <div style="border: solid 1px #d3d3d3;">
-    <i class="fa-icon fa-icon-refresh fa-icon-lg fa-icon-spin"></i> Loading...
-    <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-refresh fa-icon-lg fa-icon-spin"></i> Loading...</button>
+    <i class="fa fa-refresh fa-lg fa-spin"></i> Loading...
+    <button class="btn btn-default btn-sm"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button>
     <button class="btn btn-default btn-sm">Loading...</button>
-    <i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...
-    <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...</button>
+    <i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...
+    <button class="btn btn-default btn-sm"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button>
   </div>
   <div style="border: solid 1px #d3d3d3;">
-    <i class="fa-icon fa-icon-refresh fa-icon-lg fa-icon-spin"></i> Loading...
-    <button class="btn btn-default"><i class="fa-icon fa-icon-refresh fa-icon-lg fa-icon-spin"></i> Loading...</button>
+    <i class="fa fa-refresh fa-lg fa-spin"></i> Loading...
+    <button class="btn btn-default"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button>
     <button class="btn btn-default">Loading...</button>
-    <i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-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>
+    <i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...
+    <button class="btn btn-default"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button>
   </div>
   <div style="border: solid 1px #d3d3d3;">
-    <i class="fa-icon fa-icon-spinner fa-icon-lg fa-icon-spin"></i> Loading...
-    <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-spinner fa-icon-lg fa-icon-spin"></i> Loading...</button>
+    <i class="fa fa-spinner fa-lg fa-spin"></i> Loading...
+    <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-lg fa-spin"></i> Loading...</button>
     <button class="btn btn-default btn-lg">Loading...</button>
-    <i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...
-    <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...</button>
+    <i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...
+    <button class="btn btn-default btn-lg"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button>
   </div>
   <h4>Bootstrap Prepend and Append</h4>
   <div class="row">
     <div class="col-md-4">
       <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">
       </div>
     </div>
     <div class="col-md-4">
       <div class="input-group">
         <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>

src/whats-new.html

@@ -4,7 +4,7 @@ title: What's New
 navbar_active: whats-new
 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 %}
 
 {% include jumbotron.html %}