refactoring and documenting fixed width icon class

6 files changed, 62 insertions, 35 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>