refactoring and documenting fixed width icon class

css/font-awesome.css

@@ -48,14 +48,9 @@
   line-height: 0.75em;
   vertical-align: -15%;
 }
-/* increased font size for icon-lg */
+.fa-fw {
-.fa-fixed-width {
+  width: 1.2857142857142858em;
-  width: 1.1428571428571428em;
+  text-align: center;
-  padding-right: 0.2857142857142857em;
-  text-align: right;
-}
-.fa-fixed-width.fa-lg {
-  width: 1.4285714285714286em;
 }
 .fa-ul {
   padding-left: 0;

css/font-awesome.min.css

@@ -1,6 +1,6 @@
 @font-face{font-family:'FontAwesome';src:url('../fonts/FontAwesome.otf') format('opentype');font-weight:normal;font-style:normal}.fa{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
 .fa-lg{font-size:1.3333333333333333em;line-height:.75em;vertical-align:-15%}
-.fa-fixed-width{width:1.1428571428571428em;padding-right:.2857142857142857em;text-align:right}.fa-fixed-width.fa-lg{width:1.4285714285714286em}
+.fa-fw{width:1.2857142857142858em;text-align:center}
 .fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none}.fa-ul>li{position:relative}
 .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;top:.14285714285714285em;text-align:center}.fa-li.fa-lg{left:-1.8571428571428572em}
 .fa.hide{display:none}

less/core.less

@@ -17,14 +17,10 @@
   line-height: (3em / 4);
   vertical-align: -15%;
 }
-/* increased font size for icon-lg */
+
-.@{fa-css-prefix}-fixed-width {
+.@{fa-css-prefix}-fw {
-  width: (16em / 14);
+  width: (18em / 14);
-  padding-right: (4em / 14);
+  text-align: center;
-  text-align: right;
-  &.@{fa-css-prefix}-lg {
-    width: (20em / 14);
-  }
 }
 
 

src/_includes/examples/bootstrap.html

@@ -35,13 +35,13 @@
       </div>
       <div class="margin-bottom">
         <div class="btn-group open">
-          <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fixed-width"></i> User</a>
+          <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
           <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
             <span class="fa fa-caret-down"></span></a>
           <ul class="dropdown-menu">
-            <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li>
+            <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
-            <li><a href="#"><i class="fa fa-trash-o fa-fixed-width"></i> Delete</a></li>
+            <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
-            <li><a href="#"><i class="fa fa-ban fa-fixed-width"></i> Ban</a></li>
+            <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
             <li class="divider"></li>
             <li><a href="#"><i class="i"></i> Make admin</a></li>
           </ul>
@@ -76,13 +76,13 @@
 </div>
 
 <div class="btn-group open">
-  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fixed-width"></i> User</a>
+  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
   <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
     <span class="fa fa-caret-down"></span></a>
   <ul class="dropdown-menu">
-    <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li>
+    <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
-    <li><a href="#"><i class="fa fa-trash-o fa-fixed-width"></i> Delete</a></li>
+    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
-    <li><a href="#"><i class="fa fa-ban fa-fixed-width"></i> Ban</a></li>
+    <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
     <li class="divider"></li>
     <li><a href="#"><i class="i"></i> Make admin</a></li>
   </ul>

src/_includes/examples/button-dropdowns.html

@@ -7,9 +7,9 @@
         <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
           <span class="fa fa-caret-down"></span></a>
         <ul class="dropdown-menu">
-          <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li>
+          <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
-          <li><a href="#"><i class="fa fa-trash-o fa-fixed-width"></i> Delete</a></li>
+          <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
-          <li><a href="#"><i class="fa fa-ban fa-fixed-width"></i> Ban</a></li>
+          <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
           <li class="divider"></li>
           <li><a href="#"><i class="i"></i> Make admin</a></li>
         </ul>
@@ -22,9 +22,9 @@
   <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
     <span class="fa fa-caret-down"></span></a>
   <ul class="dropdown-menu">
-    <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li>
+    <li><a href="#"><i class="fa fa-pencil fa-fw"></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-trash fa-fw"></i> Delete</a></li>
-    <li><a href="#"><i class="fa fa-ban fa-fixed-width"></i> Ban</a></li>
+    <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
     <li class="divider"></li>
     <li><a href="#"><i class="i"></i> Make admin</a></li>
   </ul>

src/_includes/examples/fixed-width.html

@@ -0,0 +1,26 @@
+<section id="fixed-width">
+  <h2 class="page-header">Fixed Width Icons</h2>
+  <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 fa-home fa-fw"></i>&nbsp; Home</a></li>
+        <li><a href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a></li>
+        <li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a></li>
+        <li><a href="#"><i class="fa fa-cogs fa-fw"></i>&nbsp; Settings</a></li>
+      </ul>
+    </div>
+    <div class="col-md-9 col-sm-8">
+      <p>
+        For use when variable width throws off alignment. Especially useful in things like nav lists.
+      </p>
+{% highlight html %}
+<ul class="nav nav-pills nav-stacked">
+  <li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li>
+  <li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li>
+  <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li>
+  <li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li>
+</ul>
+{% endhighlight %}
+    </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 fa-home fa-fixed-width"></i> Home</a></li>
+        <li class="active"><a href="#"><i class="fa fa-home fa-fw"></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-book fa-fw"></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-pencil fa-fw"></i> Applications</a></li>
-        <li><a href="#"><i class="fa fa-cogs fa-fixed-width"></i> Settings</a></li>
+        <li><a href="#"><i class="fa fa-cogs fa-fw"></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 fa-home fa-fixed-width"></i> Home</a></li>
+  <li class="active"><a href="#"><i class="fa fa-home fa-fw"></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-book fa-fw"></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-pencil fa-fw"></i> Applications</a></li>
-  <li><a href="#"><i class="fa fa-cogs fa-fixed-width"></i> Settings</a></li>
+  <li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li>
 </ul>
 {% endhighlight %}
     </div>

src/_includes/examples/spinning.html

@@ -1,5 +1,5 @@
-<section id="animated-spinner">
+<section id="spinning">
-  <h2 class="page-header">Animated Spinner</h2>
+  <h2 class="page-header">Spinning Icons</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <p>

src/_includes/navbar.html

@@ -26,17 +26,17 @@
             <i class="fa fa-caret-down"></i>
           </a>
           <ul class="dropdown-menu pull-right">
-            <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fixed-width"></i>&nbsp; Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; Icons</a></li>
             <li class="divider"></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/#new"><i class="fa fa-rub fa-fw"></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/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-checkbox-checked fa-fixed-width"></i>&nbsp; Form Control Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control 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/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fixed-width"></i>&nbsp; Text Editor Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
-            <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-hand-o-right fa-fixed-width"></i>&nbsp; Directional Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-hand-o-right fa-fw"></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/#video-player"><i class="fa fa-play-circle fa-fw"></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/#brand"><i class="fa fa-github fa-fw"></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>
+            <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fw"></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>
@@ -49,9 +49,10 @@
             <li class="divider"></li>
             <li><a href="{{ page.relative_path }}examples/#inline-icons">Inline Icons</a></li>
             <li><a href="{{ page.relative_path }}examples/#larger-icons">Larger Icons</a></li>
+            <li><a href="{{ page.relative_path }}examples/#fixed-width">Fixed Width Icons</a></li>
             <li><a href="{{ page.relative_path }}examples/#bulleted-lists">Bulleted Lists</a></li>
             <li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled</a></li>
-            <li><a href="{{ page.relative_path }}examples/#animated-spinner">Animated Spinner</a></li>
+            <li><a href="{{ page.relative_path }}examples/#spinning">Spinning Icons</a></li>
             <li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped</a></li>
             <li><a href="{{ page.relative_path }}examples/#stacked">Stacked</a></li>
             <li><a href="{{ page.relative_path }}examples/#bootstrap">Bootstrap 3</a></li>

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

@@ -19,14 +19,10 @@
   line-height: (3em / 4);
   vertical-align: -15%;
 }
-/* increased font size for icon-lg */
+
-.@{fa-css-prefix}-fixed-width {
+.@{fa-css-prefix}-fw {
-  width: (16em / 14);
+  width: (18em / 14);
-  padding-right: (4em / 14);
+  text-align: center;
-  text-align: right;
-  &.@{fa-css-prefix}-lg {
-    width: (20em / 14);
-  }
 }
 
 

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

@@ -19,14 +19,10 @@
   line-height: (3em / 4);
   vertical-align: -15%;
 }
-/* increased font size for icon-lg */
+
 .#{$fa-css-prefix}-fixed-width {
-  width: (16em / 14);
+ width: (18em / 14);
-  padding-right: (4em / 14);
+ text-align: center;
-  text-align: right;
-  &.#{$fa-css-prefix}-lg {
-    width: (20em / 14);
-  }
 }
 
 

src/cheatsheet.html

@@ -23,7 +23,7 @@ relative_path: ../
   <div class="row">
     {% for icon in icons %}
     <div class="col-md-4 col-sm-6">
-      <i class="fa fa-fixed-width">&#x{{ icon.unicode }}</i>
+      <i class="fa fa-fw">&#x{{ icon.unicode }}</i>
       fa-{{ icon.id }}
       <span class="muted">(&amp;#x{{ icon.unicode }};)</span>
     </div>

src/examples.html

@@ -22,9 +22,10 @@ relative_path: ../
 
   {% include examples/inline-icons.html %}
   {% include examples/larger-icons.html %}
+  {% include examples/fixed-width.html %}
   {% include examples/lists.html %}
   {% include examples/bordered-pulled.html %}
-  {% include examples/animated-spinner.html %}
+  {% include examples/spinning.html %}
   {% include examples/rotated-flipped.html %}
   {% include examples/stacked.html %}
   {% include examples/bootstrap.html %}

src/test.html

@@ -483,10 +483,10 @@ relative_path: ../
     <div class="col-md-3">
       <div class="list-group">
         <a href="#" class="list-group-item active">
-          Overview<i class="fa fa-chevron-right fa-fixed-width pull-right"></i>
+          Overview<i class="fa fa-chevron-right fa-fw pull-right"></i>
         </a>
         <a href="#" class="list-group-item">
-          Overview<i class="fa fa-chevron-right fa-fixed-width pull-right"></i>
+          Overview<i class="fa fa-chevron-right fa-fw pull-right"></i>
         </a>
       </div>
     </div>