updating docs to use new css prefix

css/font-awesome.css

@@ -50,7 +50,7 @@
   speak: none;
 }
 /* makes the font 33% larger relative to the icon container */
-.fa-large:before {
+.fa-lg:before {
   font-size: 1.3333333333333333em;
   vertical-align: -10%;
 }
@@ -58,14 +58,14 @@
 a .fa {
   display: inline;
 }
-/* increased font size for icon-large */
+/* increased font size for icon-lg */
 .fa.fa-fixed-width {
   display: inline-block;
   width: 1.1428571428571428em;
   padding-right: 0.2857142857142857em;
   text-align: right;
 }
-.fa.fa-fixed-width.fa-large {
+.fa.fa-fixed-width.fa-lg {
   width: 1.4285714285714286em;
 }
 .fa-ul {
@@ -165,8 +165,8 @@ a .fa {
   background-repeat: repeat;
 }
 /* keeps Bootstrap styles with and without icons the same */
-.btn .fa.fa-large,
-.nav .fa.fa-large {
+.btn .fa.fa-lg,
+.nav .fa.fa-lg {
   line-height: .9em;
 }
 .btn .fa.fa-spin,
@@ -175,15 +175,15 @@ a .fa {
 }
 .nav-tabs .fa,
 .nav-pills .fa,
-.nav-tabs .fa.fa-large,
-.nav-pills .fa.fa-large {
+.nav-tabs .fa.fa-lg,
+.nav-pills .fa.fa-lg {
   line-height: .9em;
 }
 .btn .fa.pull-left.fa-2x,
 .btn .fa.pull-right.fa-2x {
   margin-top: .18em;
 }
-.btn .fa.fa-spin.fa-large {
+.btn .fa.fa-spin.fa-lg {
   line-height: .8em;
 }
 .btn.btn-small .fa.pull-left.fa-2x,
@@ -218,8 +218,7 @@ a .fa {
   line-height: 2em;
   vertical-align: -35%;
 }
-.fa-stack [class^="fa-"],
-.fa-stack [class*=" fa-"] {
+.fa-stack .fa {
   position: absolute;
   display: block;
   width: 100%;

css/font-awesome.min.css

@@ -1,8 +1,8 @@
 @font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=4.0.0');src:url('../font/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=4.0.0') format('woff'),url('../font/fontawesome-webfont.ttf?v=4.0.0') format('truetype'),url('../font/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}.fa{*margin-right:.3em;font-family:FontAwesome;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:normal;text-decoration:inherit;text-rendering:auto;-moz-osx-font-smoothing:grayscale;}
 .fa:before{display:inline-block;text-decoration:inherit;speak:none;}
-.fa-large:before{font-size:1.3333333333333333em;vertical-align:-10%;}
+.fa-lg:before{font-size:1.3333333333333333em;vertical-align:-10%;}
 a .fa{display:inline;}
-.fa.fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}.fa.fa-fixed-width.fa-large{width:1.4285714285714286em;}
+.fa.fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}.fa.fa-fixed-width.fa-lg{width:1.4285714285714286em;}
 .fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fa-ul>li{position:relative;}
 .fa-ul .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;line-height:inherit;text-align:center;}
 .fa.hide{display:none;}
@@ -19,17 +19,17 @@ a .fa{display:inline;}
 .fa.pull-left{margin-right:.3em;}
 .fa.pull-right{margin-left:.3em;}
 .fa{display:inline;width:auto;height:auto;margin-top:0;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;}
-.btn .fa.fa-large,.nav .fa.fa-large{line-height:.9em;}
+.btn .fa.fa-lg,.nav .fa.fa-lg{line-height:.9em;}
 .btn .fa.fa-spin,.nav .fa.fa-spin{display:inline-block;}
-.nav-tabs .fa,.nav-pills .fa,.nav-tabs .fa.fa-large,.nav-pills .fa.fa-large{line-height:.9em;}
+.nav-tabs .fa,.nav-pills .fa,.nav-tabs .fa.fa-lg,.nav-pills .fa.fa-lg{line-height:.9em;}
 .btn .fa.pull-left.fa-2x,.btn .fa.pull-right.fa-2x{margin-top:.18em;}
-.btn .fa.fa-spin.fa-large{line-height:.8em;}
+.btn .fa.fa-spin.fa-lg{line-height:.8em;}
 .btn.btn-small .fa.pull-left.fa-2x,.btn.btn-small .fa.pull-right.fa-2x{margin-top:.25em;}
 .btn.btn-large .fa{margin-top:0;}.btn.btn-large .fa.pull-left.fa-2x,.btn.btn-large .fa.pull-right.fa-2x{margin-top:.05em;}
 .btn.btn-large .fa.pull-left.fa-2x{margin-right:.2em;}
 .btn.btn-large .fa.pull-right.fa-2x{margin-left:.2em;}
 .nav-list .fa{line-height:inherit;}
-.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.fa-stack [class^="fa-"],.fa-stack [class*=" fa-"]{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;text-align:center;}
+.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.fa-stack .fa{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;text-align:center;}
 .fa-stack .fa-stack-base{font-size:2em;*line-height:1em;}
 .fa-spin{display:inline-block;-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear;}
 a .fa-stack,a .fa-spin{display:inline-block;text-decoration:none;}

less/bootstrap.less

@@ -19,13 +19,13 @@
 .btn, .nav {
   .fa {
 //    display: inline;
-    &.fa-large { line-height: .9em; }
+    &.fa-lg { line-height: .9em; }
     &.fa-spin { display: inline-block; }
   }
 }
 .nav-tabs, .nav-pills {
   .fa {
-    &, &.fa-large { line-height: .9em; }
+    &, &.fa-lg { line-height: .9em; }
   }
 }
 .btn {
@@ -33,7 +33,7 @@
     &.pull-left, &.pull-right {
       &.fa-2x { margin-top: .18em; }
     }
-    &.fa-spin.fa-large { line-height: .8em; }
+    &.fa-spin.fa-lg { line-height: .8em; }
   }
 }
 .btn.btn-small {

less/core.less

@@ -12,7 +12,7 @@
 }
 
 /* makes the font 33% larger relative to the icon container */
-.fa-large:before {
+.fa-lg:before {
   font-size: (4em / 3);
   vertical-align: -10%;
 }
@@ -24,14 +24,14 @@ a {
   }
 }
 
-/* increased font size for icon-large */
+/* increased font size for icon-lg */
 .fa {
   &.fa-fixed-width {
     display: inline-block;
     width: (16em / 14);
     padding-right: (4em / 14);
     text-align: right;
-    &.fa-large {
+    &.fa-lg {
       width: (20em / 14);
     }
   }

less/mixins.less

@@ -31,8 +31,7 @@
     height: @height;
     line-height: @width;
     vertical-align: -35%;
-    [class^="fa-"],
-    [class*=" fa-"] {
+    .fa {
       position: absolute;
       display: block;
       width: 100%;

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="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

@@ -2,18 +2,18 @@
   <h2 class="page-header">Animated Spinner</h2>
   <div class="row">
     <div class="span3">
-      Use the <code>icon-spin</code> class to get any icon to rotate. Works well with <code>icon-spinner</code> and
-      <code>icon-refresh</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>.
     </div>
     <div class="span9">
       <div class="well well-large well-transparent lead">
-        <i class="icon-spinner icon-spin icon-large"></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="icon-spinner icon-spin icon-large"></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-info">
-        <i class="icon-info-sign"></i> CSS3 animations aren't supported in IE7 - IE9.
+        <i class="fa fa-info-sign"></i> CSS3 animations aren't supported in IE7 - IE9.
       </p>
     </div>
   </div>

src/_includes/examples/bordered-pulled.html

@@ -3,29 +3,29 @@
   <div class="row">
     <div class="span3">
       <p>
-        Use <code>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="span9">
       <div class="well well-large well-transparent">
-        <i class="icon-quote-left icon-4x pull-left 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="icon-quote-left icon-4x pull-left 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="icon-flag icon-4x pull-left 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="icon-flag icon-4x pull-left 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/bulleted-lists.html

@@ -4,28 +4,28 @@
     <div class="span12">
     </div>
     <div class="span3">
-      <ul class="icons-ul">
-        <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
-        <li><i class="icon-li icon-ok"></i>Buttons</li>
-        <li><i class="icon-li icon-ok"></i>Button groups</li>
-        <li><i class="icon-li icon-ok"></i>Navigation</li>
-        <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
-        <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
+      <ul class="fa-ul">
+        <li><i class="fa-li fa fa-ok"></i>Bulleted lists (like this one)</li>
+        <li><i class="fa-li fa fa-ok"></i>Buttons</li>
+        <li><i class="fa-li fa fa-ok"></i>Button groups</li>
+        <li><i class="fa-li fa fa-ok"></i>Navigation</li>
+        <li><i class="fa-li fa fa-ok"></i>Prepended form inputs</li>
+        <li><i class="fa-li fa fa-ok"></i>&hellip;and many more with custom CSS</li>
       </ul>
     </div>
     <div class="span9">
       <p>Easily replace individual bullets.</p>
 {% highlight html %}
-<ul class="icons-ul">
-  <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
-  <li><i class="icon-li icon-ok"></i>Buttons</li>
-  <li><i class="icon-li icon-ok"></i>Button groups</li>
-  <li><i class="icon-li icon-ok"></i>Navigation</li>
-  <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
-  <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
+<ul class="fa-ul">
+  <li><i class="fa-li fa fa-ok"></i>Bulleted lists (like this one)</li>
+  <li><i class="fa-li fa fa-ok"></i>Buttons</li>
+  <li><i class="fa-li fa fa-ok"></i>Button groups</li>
+  <li><i class="fa-li fa fa-ok"></i>Navigation</li>
+  <li><i class="fa-li fa fa-ok"></i>Prepended form inputs</li>
+  <li><i class="fa-li fa fa-ok"></i>&hellip;and many more with custom CSS</li>
 </ul>
 {% endhighlight %}
-      <div class="alert alert-info"><i class="icon-info-sign"></i> Make sure to NOT include any whitespace after the icon declaration.</div>
+      <div class="alert alert-info"><i class="fa fa-info-sign"></i> Make sure to NOT include any whitespace after the icon declaration.</div>
     </div>
   </div>
 </section>

src/_includes/examples/button-dropdowns.html

@@ -3,13 +3,13 @@
   <div class="row">
     <div class="span3">
       <div class="btn-group open">
-        <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
+        <a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a>
         <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
-          <span class="icon-caret-down"></span></a>
+          <span class="fa fa-caret-down"></span></a>
         <ul class="dropdown-menu">
-          <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Edit</a></li>
-          <li><a href="#"><i class="icon-fixed-width icon-trash"></i> Delete</a></li>
-          <li><a href="#"><i class="icon-fixed-width icon-ban-circle"></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-circle 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="span9">
 {% highlight html %}
 <div class="btn-group open">
-  <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
+  <a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a>
   <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
-    <span class="icon-caret-down"></span></a>
+    <span class="fa fa-caret-down"></span></a>
   <ul class="dropdown-menu">
-    <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Edit</a></li>
-    <li><a href="#"><i class="icon-fixed-width icon-trash"></i> Delete</a></li>
-    <li><a href="#"><i class="icon-fixed-width icon-ban-circle"></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-circle 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-info"><i class="icon-info-sign"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div>
+      <div class="alert alert-info"><i class="fa fa-info-sign"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div>
     </div>
   </div>
 </section>

src/_includes/examples/button-groups.html

@@ -4,20 +4,20 @@
     <div class="span3">
       <p>
       <div class="btn-group">
-        <a class="btn" href="#"><i class="icon-align-left"></i></a>
-        <a class="btn" href="#"><i class="icon-align-center"></i></a>
-        <a class="btn" href="#"><i class="icon-align-right"></i></a>
-        <a class="btn" href="#"><i class="icon-align-justify"></i></a>
+        <a class="btn" href="#"><i class="fa fa-align-left"></i></a>
+        <a class="btn" href="#"><i class="fa fa-align-center"></i></a>
+        <a class="btn" href="#"><i class="fa fa-align-right"></i></a>
+        <a class="btn" href="#"><i class="fa fa-align-justify"></i></a>
       </div>
       </p>
     </div>
     <div class="span9">
 {% highlight html %}
 <div class="btn-group">
-  <a class="btn" href="#"><i class="icon-align-left"></i></a>
-  <a class="btn" href="#"><i class="icon-align-center"></i></a>
-  <a class="btn" href="#"><i class="icon-align-right"></i></a>
-  <a class="btn" href="#"><i class="icon-align-justify"></i></a>
+  <a class="btn" href="#"><i class="fa fa-align-left"></i></a>
+  <a class="btn" href="#"><i class="fa fa-align-center"></i></a>
+  <a class="btn" href="#"><i class="fa fa-align-right"></i></a>
+  <a class="btn" href="#"><i class="fa fa-align-justify"></i></a>
 </div>
 {% endhighlight %}
     </div>

src/_includes/examples/buttons.html

@@ -4,53 +4,53 @@
     <div class="span3">
       <p>
         <a class="btn" href="#">
-          <i class="icon-repeat"></i> Reload</a>
+          <i class="fa fa-repeat"></i> Reload</a>
         <a class="btn btn-success" href="#">
-          <i class="icon-shopping-cart icon-large"></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="icon-comment"></i> Comment</a>
+          <i class="fa fa-comment"></i> Comment</a>
         <a class="btn btn-small btn-info" href="#">
-          <i class="icon-info-sign"></i> Info</a>
+          <i class="fa fa-info-sign"></i> Info</a>
       </p>
       <p>
         <a class="btn btn-danger" href="#">
-          <i class="icon-trash icon-large"></i> Delete</a>
+          <i class="fa fa-trash fa-lg"></i> Delete</a>
         <a class="btn btn-small" href="#">
-          <i class="icon-cog"></i> Settings</a>
+          <i class="fa fa-cog"></i> Settings</a>
       </p>
       <p>
         <a class="btn btn-large btn-danger" href="#">
-          <i class="icon-flag 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-primary" href="#">
-          <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
+          <i class="fa fa-refresh fa-spin"></i> Synchronizing Content...</a>
       </p>
     </div>
     <div class="span9">
       <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>icon-spin</code>.
+        <code>pull-right</code> and <code>pull-left</code>, and <code>fa-spin</code>.
       </p>
 {% highlight html %}
 <a class="btn" href="#">
-  <i class="icon-repeat"></i> Reload</a>
+  <i class="fa fa-repeat"></i> Reload</a>
 <a class="btn btn-success" href="#">
-  <i class="icon-shopping-cart icon-large"></i> Checkout</a>
+  <i class="fa fa-shopping-cart fa-lg"></i> Checkout</a>
 <a class="btn btn-large btn-primary" href="#">
-  <i class="icon-comment"></i> Comment</a>
+  <i class="fa fa-comment"></i> Comment</a>
 <a class="btn btn-small btn-info" href="#">
-  <i class="icon-info-sign"></i> Info</a>
+  <i class="fa fa-info-sign"></i> Info</a>
 <a class="btn btn-danger" href="#">
-  <i class="icon-trash icon-large"></i> Delete</a>
+  <i class="fa fa-trash fa-lg"></i> Delete</a>
 <a class="btn btn-small" href="#">
-  <i class="icon-cog"></i> Settings</a>
+  <i class="fa fa-cog"></i> Settings</a>
 <a class="btn btn-large btn-danger" href="#">
-  <i class="icon-flag 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-primary" href="#">
-  <i class="icon-refresh 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

@@ -4,11 +4,11 @@
     <div class="span3">
       <form>
         <div class="input-prepend">
-          <span class="add-on"><i class="icon-envelope"></i></span>
+          <span class="add-on"><i class="fa fa-envelope"></i></span>
           <input class="span2" type="text" placeholder="Email address">
         </div>
         <div class="input-prepend">
-          <span class="add-on"><i class="icon-key"></i></span>
+          <span class="add-on"><i class="fa fa-key"></i></span>
           <input class="span2" type="password" placeholder="Password">
         </div>
       </form>
@@ -17,11 +17,11 @@
 {% highlight html %}
 <form>
   <div class="input-prepend">
-    <span class="add-on"><i class="icon-envelope"></i></span>
+    <span class="add-on"><i class="fa fa-envelope"></i></span>
     <input class="span2" type="text" placeholder="Email address">
   </div>
   <div class="input-prepend">
-    <span class="add-on"><i class="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="span9">
       <div class="well well-transparent">
         <div style="font-size: 24px; line-height: 1.5em;">
-          <i class="icon-camera-retro"></i> icon-camera-retro
+          <i class="fa fa-camera-retro"></i> icon-camera-retro
         </div>
       </div>
 {% highlight html %}
-<i class="icon-camera-retro"></i> icon-camera-retro
+<i class="fa fa-camera-retro"></i> icon-camera-retro
 {% endhighlight %}
-      <div class="alert alert-info"><i class="icon-info-sign"></i> Icon classes are echoed via CSS :before.</div>
+      <div class="alert alert-info"><i class="fa fa-info-sign"></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="span3">
       <p>
-        To increase the size of icons relative to its container, use <code>icon-large</code>, <code>icon-2x</code>,
-        <code>icon-3x</code>, or <code>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="span9">
       <p>
-        Increase the icon size by using the <code>icon-large</code> (33% increase), <code>icon-2x</code>,
-        <code>icon-3x</code>, or <code>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="icon-camera-retro icon-large"></i> icon-camera-retro</p>
-          <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
-          <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
-          <p><i class="icon-camera-retro icon-4x"></i> 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="icon-camera-retro icon-large"></i> icon-camera-retro</p>
-<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
-<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
-<p><i class="icon-camera-retro icon-4x"></i> 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-info">
-        <i class="icon-info-sign"></i> If your icons are getting chopped off on top and bottom, make sure you have
+        <i class="fa fa-info-sign"></i> If your icons are getting chopped off on top and bottom, make sure you have
         sufficient line-height.
       </div>
     </div>

src/_includes/examples/navigation.html

@@ -4,10 +4,10 @@
     <div class="span3">
       <div class="well" style="padding: 8px 0;">
         <ul class="nav nav-list">
-          <li class="active"><a href="#"><i class="icon-fixed-width icon-home"></i> Home</a></li>
-          <li><a href="#"><i class="icon-fixed-width icon-book"></i> Library</a></li>
-          <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Applications</a></li>
-          <li><a href="#"><i class="icon-fixed-width icon-cogs"></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>
@@ -15,10 +15,10 @@
       <p>Use Font Awesome icons in navigation to provide helpful visual cues.</p>
 {% highlight html %}
 <ul class="nav nav-list">
-  <li class="active"><a href="#"><i class="icon-fixed-width icon-home"></i> Home</a></li>
-  <li><a href="#"><i class="icon-fixed-width icon-book"></i> Library</a></li>
-  <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Applications</a></li>
-  <li><a href="#"><i class="icon-fixed-width icon-cogs"></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,42 +4,42 @@
     <div class="span4">
       <h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4>
       <div class="well well-transparent">
-        <i class="icon-shield"></i>&nbsp; normal<br>
-        <i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
-        <i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
-        <i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
-        <i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
-        <i class="icon-shield 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; fa-flip-vertical
       </div>
     </div>
     <div class="span4">
       <h4><a href="#stacked">Stacked Icons</a></h4>
       <div class="well well-transparent stacked">
-        <span class="icon-stack">
-          <i class="icon-check-empty icon-stack-base"></i>
-          <i class="icon-twitter"></i>
+        <span class="fa-stack">
+          <i class="fa fa-unchecked fa-stack-base"></i>
+          <i class="fa fa-twitter"></i>
         </span>
-        icon-twitter on icon-check-empty<br>
-        <span class="icon-stack">
-          <i class="icon-circle icon-stack-base"></i>
-          <i class="icon-flag icon-light"></i>
+        fa-twitter on fa-check-empty<br>
+        <span class="fa-stack">
+          <i class="fa fa-circle fa-stack-base"></i>
+          <i class="fa fa-flag fa-light"></i>
         </span>
-        icon-flag on icon-circle<br>
-        <span class="icon-stack">
-          <i class="icon-sign-blank icon-stack-base"></i>
-          <i class="icon-terminal 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>
-        icon-terminal on icon-sign-blank
+        fa-terminal on fa-sign-blank
       </div>
     </div>
     <div class="span4">
       <h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4>
       <div class="well well-transparent">
-        <ul class="icons-ul">
-          <li><i class="icon-li icon-chevron-sign-right"></i>New bulleted lists</li>
-          <li><i class="icon-li icon-bullseye"></i>Fix some old bugs</li>
-          <li><i class="icon-li icon-play-sign"></i>And deal with arbitrary</li>
-          <li><i class="icon-li icon-ok-sign"></i>Font sizes better</li>
+        <ul class="fa-ul">
+          <li><i class="fa fa-li fa-chevron-sign-right"></i>New bulleted lists</li>
+          <li><i class="fa fa-li fa-bullseye"></i>Fix some old bugs</li>
+          <li><i class="fa fa-li fa-play-sign"></i>And deal with arbitrary</li>
+          <li><i class="fa fa-li fa-ok-sign"></i>Font sizes better</li>
         </ul>
       </div>
     </div>

src/_includes/examples/rotated-flipped.html

@@ -6,23 +6,23 @@
     </div>
     <div class="span9">
       <div class="well well-large well-transparent lead">
-        <i class="icon-shield"></i>&nbsp; normal<br>
-        <i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
-        <i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
-        <i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
-        <i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
-        <i class="icon-shield 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; fa-flip-vertical
       </div>
 {% highlight html %}
-<i class="icon-shield"></i>&nbsp; normal<br>
-<i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
-<i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
-<i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
-<i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
-<i class="icon-shield 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-info">
-        <i class="icon-info-sign"></i> Rotating and flipping icons aren't yet supported in IE7.
+        <i class="fa fa-info-sign"></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="span3">
-      A method for easily stacking multiple icons. Use the <code>icon-stack</code> class on the parent and
-      <code>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="span9">
       <div class="well well-large well-transparent lead">
-        <span class="icon-stack">
-          <i class="icon-check-empty icon-stack-base"></i>
-          <i class="icon-twitter"></i>
+        <span class="fa-stack">
+          <i class="fa fa-check-empty fa-stack-base"></i>
+          <i class="fa fa-twitter"></i>
         </span>
-        icon-twitter on icon-check-empty<br>
-        <span class="icon-stack">
-          <i class="icon-circle icon-stack-base"></i>
-          <i class="icon-flag icon-light"></i>
+        fa-twitter on fa-check-empty<br>
+        <span class="fa-stack">
+          <i class="fa fa-circle fa-stack-base"></i>
+          <i class="fa fa-flag fa-light"></i>
         </span>
-        icon-flag on icon-circle<br>
-        <span class="icon-stack">
-          <i class="icon-sign-blank icon-stack-base"></i>
-          <i class="icon-terminal 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>
-        icon-terminal on icon-sign-blank<br>
-        <span class="icon-stack">
-          <i class="icon-camera"></i>
-          <i class="icon-ban-circle icon-stack-base text-error"></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-error"></i>
         </span>
-        icon-camera on icon-ban-circle
+        fa-camera on fa-ban-circle
       </div>
 {% highlight html %}
-<span class="icon-stack">
-  <i class="icon-check-empty icon-stack-base"></i>
-  <i class="icon-twitter"></i>
+<span class="fa-stack">
+  <i class="fa fa-check-empty fa-stack-base"></i>
+  <i class="fa fa-twitter"></i>
 </span>
-icon-twitter on icon-check-empty<br>
-<span class="icon-stack">
-  <i class="icon-circle icon-stack-base"></i>
-  <i class="icon-flag icon-light"></i>
+fa-twitter on fa-check-empty<br>
+<span class="fa-stack">
+  <i class="fa fa-circle fa-stack-base"></i>
+  <i class="fa fa-flag fa-light"></i>
 </span>
-icon-flag on icon-circle<br>
-<span class="icon-stack">
-  <i class="icon-sign-blank icon-stack-base"></i>
-  <i class="icon-terminal 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>
-icon-terminal on icon-sign-blank<br>
-<span class="icon-stack">
-  <i class="icon-camera"></i>
-  <i class="icon-ban-circle icon-stack-base text-error"></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-error"></i>
 </span>
-icon-camera on icon-ban-circle
+fa-camera on fa-ban-circle
 {% endhighlight %}
     </div>
   </div>

src/_includes/footer.html

@@ -1,7 +1,7 @@
 <footer class="footer hidden-print">
   <div class="container text-center">
     <div>
-      <i class="icon-flag"></i> Font Awesome {{ site.fontawesome.version }}
+      <i class="fa fa-flag"></i> Font Awesome {{ site.fontawesome.version }}
       <span class="hidden-phone">&middot;</span><br class="visible-phone">
       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="icon-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#tab_fontawesome">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/#tab_fontawesome">BootstrapCDN for Font Awesome</a>
     </div>
     <div class="project">
       <a href="{{ site.fontawesome.github.url }}">GitHub Project</a> &middot;

src/_includes/get-started.html

@@ -18,7 +18,7 @@
 <link href="//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version }}/css/font-awesome.css" rel="stylesheet">
 {% endhighlight %}
       <div class="alert alert-info margin-top">
-        <i class="icon-info-sign"></i> Want to use Font Awesome by itself without Bootstrap? Just don't include the first line.
+        <i class="fa fa-info-sign"></i> Want to use Font Awesome by itself without Bootstrap? Just don't include the first line.
       </div>
     </li>
     <li>
@@ -66,7 +66,7 @@
 {% highlight html %}
 @FontAwesomePath:   "../font";
 {% endhighlight %}
-      <p class="alert alert-info"><i class="icon-info-sign"></i> The font path is relative from your compiled CSS directory.</p>
+      <p class="alert alert-info"><i class="fa fa-info-sign"></i> The font path is relative from your compiled CSS directory.</p>
     </li>
     <li>Re-compile your LESS 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/_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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 

src/_includes/jumbotron-slider.html

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

src/_includes/license.html

@@ -8,9 +8,9 @@
 
 <div>
   <div class="alert alert-info">
-    <ul class="icons-ul margin-bottom-none">
+    <ul class="fa-ul margin-bottom-none">
       <li>
-        <i class="icon-li icon-info-sign icon-large"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated:
+        <i class="fa-li fa fa-info-sign fa-lg"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated:
         "Font Awesome by Dave Gandy - http://fontawesome.io".
       </li>
     </ul>

src/_includes/navbar.html

@@ -7,7 +7,7 @@
         <span class="icon-bar"></span>
       </a>
 
-      <a class="brand" href="{{ page.relative_path }}"><i class="icon-flag"></i> Font Awesome</a>
+      <a class="brand" href="{{ page.relative_path }}"><i class="fa fa-flag"></i> Font Awesome</a>
       <div class="nav-collapse collapse">
         <ul class="nav">
           <li class="hidden-tablet {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li>
@@ -15,25 +15,25 @@
           <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-phone{% if page.navbar_active == "icons" %} active{% endif %}">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-              <i class="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="icon-flag 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="icon-shield icon-fixed-width"></i>&nbsp; New Icons in {{ site.fontawesome.version }}</a></li>
-              <li><a href="{{ page.relative_path }}icons/#web-application"><i class="icon-camera-retro icon-fixed-width"></i>&nbsp; Web Application Icons</a></li>
-              <li><a href="{{ page.relative_path }}icons/#currency"><i class="icon-won icon-fixed-width"></i>&nbsp; Currency Icons</a></li>
-              <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="icon-file-text-alt icon-fixed-width"></i>&nbsp; Text Editor Icons</a></li>
-              <li><a href="{{ page.relative_path }}icons/#directional"><i class="icon-hand-right icon-fixed-width"></i>&nbsp; Directional Icons</a></li>
-              <li><a href="{{ page.relative_path }}icons/#video-player"><i class="icon-play-sign icon-fixed-width"></i>&nbsp; Video Player Icons</a></li>
-              <li><a href="{{ page.relative_path }}icons/#brand"><i class="icon-github icon-fixed-width"></i>&nbsp; Brand Icons</a></li>
-              <li><a href="{{ page.relative_path }}icons/#medical"><i class="icon-medkit icon-fixed-width"></i>&nbsp; Medical Icons</a></li>
+              <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-shield fa-fixed-width"></i>&nbsp; New Icons in {{ site.fontawesome.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-right fa-fixed-width"></i>&nbsp; Directional Icons</a></li>
+              <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-sign 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-phone{% if page.navbar_active == "examples" %} active{% endif %}">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-              <i class="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>

src/_includes/tell-me-thanks.html

@@ -6,7 +6,7 @@
   </p>
   <div class="row">
     <div class="span6">
-      <h3><a href="https://www.gittip.com/davegandy/"><i class="icon-gittip"></i> Tip me on Gittip</a></h3>
+      <h3><a href="https://www.gittip.com/davegandy/"><i class="fa fa-gittip"></i> Tip me on Gittip</a></h3>
       <p>
         Gittip is a great way to let developers know you appreciate their work.
       </p>

src/_includes/thanks-to.html

@@ -17,7 +17,7 @@
     </div>
     <div class="span4">
       <p>
-        Thanks to <a href="http://maxcdn.com"><i class="icon-maxcdn"></i> MaxCDN</a> for providing the excellent
+        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/#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/whats-new.html

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

src/_includes/why.html

@@ -1,40 +1,40 @@
 <div id="why">
   <div class="row">
     <div class="span4">
-      <h4><i class="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="span4">
-      <h4><i class="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="span4">
-      <h4><i class="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="span4">
-      <h4><i class="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="span4">
-      <h4><i class="icon-ok"></i> IE7 Support</h4>
+      <h4><i class="fa fa-ok"></i> IE7 Support</h4>
       Font Awesome supports IE7. If you need it, you have my condolences.
     </div>
     <div class="span4">
-      <h4><i class="icon-eye-open"></i> Perfect on Retina Displays</h4>
+      <h4><i class="fa fa-eye-open"></i> Perfect on Retina Displays</h4>
       Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
     </div>
     <div class="span4">
-      <h4><i class="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="span4">
-      <h4><i class="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="span4">
-      <h4><i class="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="icon-{{ page.icon.id }} icon-6"></i>&nbsp;&nbsp;
+      <i class="fa fa-{{ page.icon.id }} fa-6"></i>&nbsp;&nbsp;
       <span class="hidden-phone">
-        <i class="icon-{{ page.icon.id }} icon-5"></i>&nbsp;&nbsp;
-        <span class="hidden-tablet"><i class="icon-{{ page.icon.id }} icon-4"></i>&nbsp;&nbsp;</span>
-        <i class="icon-{{ page.icon.id }} icon-3"></i>&nbsp;&nbsp;
-        <i class="icon-{{ page.icon.id }} icon-2"></i>&nbsp;
+        <i class="fa fa-{{ page.icon.id }} fa-5"></i>&nbsp;&nbsp;
+        <span class="hidden-tablet"><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="icon-{{ page.icon.id }} icon-1"></i>
+      <i class="fa fa-{{ page.icon.id }} fa-1"></i>
     </div>
     <h1 class="info-class">
-      icon-{{ page.icon.id }}
+      fa-{{ page.icon.id }}
       <small>
-        <i class="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 %}
-            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="icon-{{ page.icon.id }}"></i> icon-{{ page.icon.id }}
+            <i class="fa fa-{{ page.icon.id }}"></i> fa-{{ page.icon.id }}
           </div>
         </div>
 {% highlight html %}
-<i class="icon-{{ page.icon.id }}"></i> icon-{{ page.icon.id }}
+<i class="fa fa-{{ page.icon.id }}"></i> fa-{{ page.icon.id }}
 {% endhighlight %}
         <br>
-        <div class="lead"><i class="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="span3">
         <div class="info-ad">{% include ads/carbon-light-vertical.html %}</div>

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

@@ -21,13 +21,13 @@
 .btn, .nav {
   .{{ site.fontawesome.css_prefix }} {
 //    display: inline;
-    &.{{ site.fontawesome.css_prefix }}-large { line-height: .9em; }
+    &.{{ site.fontawesome.css_prefix }}-lg { line-height: .9em; }
     &.{{ site.fontawesome.css_prefix }}-spin { display: inline-block; }
   }
 }
 .nav-tabs, .nav-pills {
   .{{ site.fontawesome.css_prefix }} {
-    &, &.{{ site.fontawesome.css_prefix }}-large { line-height: .9em; }
+    &, &.{{ site.fontawesome.css_prefix }}-lg { line-height: .9em; }
   }
 }
 .btn {
@@ -35,7 +35,7 @@
     &.pull-left, &.pull-right {
       &.{{ site.fontawesome.css_prefix }}-2x { margin-top: .18em; }
     }
-    &.{{ site.fontawesome.css_prefix }}-spin.{{ site.fontawesome.css_prefix }}-large { line-height: .8em; }
+    &.{{ site.fontawesome.css_prefix }}-spin.{{ site.fontawesome.css_prefix }}-lg { line-height: .8em; }
   }
 }
 .btn.btn-small {

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

@@ -14,7 +14,7 @@
 }
 
 /* makes the font 33% larger relative to the icon container */
-.{{ site.fontawesome.css_prefix }}-large:before {
+.{{ site.fontawesome.css_prefix }}-lg:before {
   font-size: (4em / 3);
   vertical-align: -10%;
 }
@@ -26,14 +26,14 @@ a {
   }
 }
 
-/* increased font size for icon-large */
+/* increased font size for icon-lg */
 .{{ site.fontawesome.css_prefix }} {
   &.{{ site.fontawesome.css_prefix }}-fixed-width {
     display: inline-block;
     width: (16em / 14);
     padding-right: (4em / 14);
     text-align: right;
-    &.{{ site.fontawesome.css_prefix }}-large {
+    &.{{ site.fontawesome.css_prefix }}-lg {
       width: (20em / 14);
     }
   }

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

@@ -1,3 +1,5 @@
+---
+---
 // Mixins
 // --------------------------
 
@@ -24,15 +26,14 @@
 }
 
 .icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
-  .fa-stack {
+  .{{ site.fontawesome.css_prefix }}-stack {
     position: relative;
     display: inline-block;
     width: @width;
     height: @height;
     line-height: @width;
     vertical-align: -35%;
-    [class^="fa-"],
-    [class*=" fa-"] {
+    .{{ site.fontawesome.css_prefix }} {
       position: absolute;
       display: block;
       width: 100%;
@@ -42,7 +43,7 @@
       *line-height: @height;
       text-align: center;
     }
-    .fa-stack-base {
+    .{{ site.fontawesome.css_prefix }}-stack-base {
       font-size: @base-font-size;
       *line-height: (@height / @base-font-size);
     }

src/assets/less/responsive-767px-max.less

@@ -46,8 +46,8 @@
   }
 
   .jumbotron-icon {
-    .icon-1, .icon-2, .icon-3, .icon-4, .icon-5, .icon-6 { margin-right: 0; }
-    .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/assets/less/site.less

@@ -10,7 +10,7 @@
 
 .navbar .brand {
   font-family: @serifFontFamily;
-  .icon-flag { padding-right: 3px; }
+  .fa-flag { padding-right: 3px; }
 }
 
 .navbar .nav > li > a { padding: 12px 10px 9px; }
@@ -74,18 +74,19 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
   }
   .actions { margin-top: 25px;}
   text-shadow: 2px 2px 2px @grayDark;
-  ul {
-    margin-left: 50px;
-    li {
-      &.icon-large:before {
-        text-indent: -2em;
-        vertical-align: baseline;
-      }
-      font-size: 15px;
-      line-height: 30px;
-      text-shadow: 1px 1px 1px @grayDark;
-    }
-  }
+  // unsure if block below still in use
+//  ul {
+//    margin-left: 50px;
+//    li {
+//      &.icon-large:before {
+//        text-indent: -2em;
+//        vertical-align: baseline;
+//      }
+//      font-size: 15px;
+//      line-height: 30px;
+//      text-shadow: 1px 1px 1px @grayDark;
+//    }
+//  }
   .btn-large {
     font-family: @serifFontFamily;
     font-weight: 500;
@@ -157,13 +158,13 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
       dd { margin-left: @horizontalComponentOffset - 85; }
     }
   }
-  .icon-2 { font-size: 2em; }
-  .icon-3 { font-size: 4em; }
-  .icon-4 { font-size: 7em; }
-  .icon-5 { font-size: 12em; }
-  .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; }
 
-  .icon-1, .icon-2, .icon-3, .icon-4, .icon-5, .icon-6 { margin-right: 1/14em; }
+  .fa-1, .fa-2, .fa-3, .fa-4, .fa-5, .fa-6 { margin-right: 1/14em; }
 }
 
 //.info-ad {
@@ -232,8 +233,7 @@ section { margin-top: 40px; }
       padding-left: 10px;
       .border-radius(6px);
 
-      [class^="icon-"],
-      [class*=" icon-"] {
+      .fa {
         width: 32px;
         font-size: 14px;
         display: inline-block;
@@ -244,13 +244,12 @@ section { margin-top: 40px; }
       &:hover {
         background-color: @errorBackground;
         text-decoration: none;
-        [class^="icon-"], [class*=" icon-"] {
+        .fa {
           *font-size: 28px;
           *vertical-align: middle;
         }
 
-        [class^="icon-"]:before,
-        [class*=" icon-"]:before {
+        .fa:before {
           font-size: 28px;
           vertical-align: -5px;
         }
@@ -262,8 +261,7 @@ section { margin-top: 40px; }
 #why, #whats-new {
   .span4 { margin-bottom: 20px; }
   h4 {
-    [class^="icon-"]:before,
-    [class*=" icon-"]:before {
+    .fa:before {
       vertical-align: -10%;
       font-size: 28px;
       display: inline-block;

src/community.html

@@ -4,7 +4,7 @@ title: The Font Awesome Community
 navbar_active: community
 relative_path: ../
 ---
-{% capture jumbotron_h1 %}<i class="icon-thumbs-up-alt icon-large"></i>&nbsp; Community{% endcapture %}
+{% capture jumbotron_h1 %}<i class="fa fa-thumbs-up-alt fa-lg"></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="icon-magic icon-large"></i>&nbsp; Examples{% endcapture %}
+{% capture jumbotron_h1 %}<i class="fa fa-magic fa-large"></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="icon-cogs icon-large"></i>&nbsp; Get Started{% endcapture %}
+{% capture jumbotron_h1 %}<i class="fa fa-cogs fa-lg"></i>&nbsp; Get Started{% endcapture %}
 {% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.fontawesome.version }} onto your website{% endcapture %}
 
 {% include jumbotron.html %}

src/icons.html

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

src/whats-new.html

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