refactoring and documenting fixed width icon class

11 files changed, 74 insertions, 54 deletions

diff --git a/src/_includes/examples/bootstrap.html b/src/_includes/examples/bootstrap.html
index 2c8f4a468..f8ee71700 100644
--- a/src/_includes/examples/bootstrap.html
+++ b/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-trash-o fa-fixed-width"></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-pencil fa-fw"></i> Edit</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-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-trash-o fa-fixed-width"></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-pencil fa-fw"></i> Edit</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-fw"></i> Ban</a></li>
     <li class="divider"></li>
     <li><a href="#"><i class="i"></i> Make admin</a></li>
   </ul>
diff --git a/src/_includes/examples/button-dropdowns.html b/src/_includes/examples/button-dropdowns.html
index 7a4e67a05..b024c9d4f 100644
--- a/src/_includes/examples/button-dropdowns.html
+++ b/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-trash-o fa-fixed-width"></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-pencil fa-fw"></i> Edit</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-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-trash fa-fixed-width"></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-pencil fa-fw"></i> Edit</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-fw"></i> Ban</a></li>
     <li class="divider"></li>
     <li><a href="#"><i class="i"></i> Make admin</a></li>
   </ul>
diff --git a/src/_includes/examples/fixed-width.html b/src/_includes/examples/fixed-width.html
new file mode 100644
index 000000000..2a0f8f592
--- /dev/null
+++ b/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>
diff --git a/src/_includes/examples/navigation.html b/src/_includes/examples/navigation.html
index 360da1f54..e37b5b95f 100644
--- a/src/_includes/examples/navigation.html
+++ b/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><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>
+        <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>
     </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><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>
+  <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>
diff --git a/src/_includes/examples/animated-spinner.html b/src/_includes/examples/spinning.html
index f83debab6..da8bacfd1 100644
--- a/src/_includes/examples/animated-spinner.html
+++ b/src/_includes/examples/spinning.html
@@ -1,5 +1,5 @@
-<section id="animated-spinner">
-  <h2 class="page-header">Animated Spinner</h2>
+<section id="spinning">
+  <h2 class="page-header">Spinning Icons</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <p>
diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html
index e512ba5a8..29f18c922 100644
--- a/src/_includes/navbar.html
+++ b/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/#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/#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/#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-o fa-fixed-width"></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/#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>
+            <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-fw"></i>&nbsp; Web Application 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-fw"></i>&nbsp; Currency 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-fw"></i>&nbsp; Directional 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-fw"></i>&nbsp; Brand 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>
diff --git a/src/assets/font-awesome/less/core.less b/src/assets/font-awesome/less/core.less
index df9d895ae..ee26820f6 100644
--- a/src/assets/font-awesome/less/core.less
+++ b/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 {
-  width: (16em / 14);
-  padding-right: (4em / 14);
-  text-align: right;
-  &.@{fa-css-prefix}-lg {
-    width: (20em / 14);
-  }
+
+.@{fa-css-prefix}-fw {
+  width: (18em / 14);
+  text-align: center;
 }
 
 
diff --git a/src/assets/font-awesome/scss/_core.scss b/src/assets/font-awesome/scss/_core.scss
index 4f8570a4a..0c789f704 100644
--- a/src/assets/font-awesome/scss/_core.scss
+++ b/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);
-  padding-right: (4em / 14);
-  text-align: right;
-  &.#{$fa-css-prefix}-lg {
-    width: (20em / 14);
-  }
+ width: (18em / 14);
+ text-align: center;
 }
 
 
diff --git a/src/cheatsheet.html b/src/cheatsheet.html
index c0f634bd8..3685a0620 100644
--- a/src/cheatsheet.html
+++ b/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>
diff --git a/src/examples.html b/src/examples.html
index a9f36626d..40ec4c63c 100644
--- a/src/examples.html
+++ b/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 %}
diff --git a/src/test.html b/src/test.html
index ce39cb3d5..cf14f6a50 100644
--- a/src/test.html
+++ b/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>