re-writing & simplifying stacked icons, massive re-organization of less include files

css/font-awesome.css

@@ -31,8 +31,6 @@
   font-weight: normal;
   font-style: normal;
 }
-/* FONT AWESOME CORE
- * -------------------------- */
 .fa {
   display: inline-block;
   font-family: FontAwesome;
@@ -48,6 +46,18 @@
   line-height: 0.75em;
   vertical-align: -15%;
 }
+.fa-2x {
+  font-size: 2em;
+}
+.fa-3x {
+  font-size: 3em;
+}
+.fa-4x {
+  font-size: 4em;
+}
+.fa-5x {
+  font-size: 5em;
+}
 .fa-fw {
   width: 1.2857142857142858em;
   text-align: center;
@@ -70,50 +80,11 @@
 .fa-li.fa-lg {
   left: -1.8571428571428572em;
 }
-.fa.hide {
-  display: none;
-}
-.fa-muted {
-  color: #eeeeee;
-}
-.fa-light {
-  color: #ffffff;
-}
-.fa-dark {
-  color: #333333;
-}
 .fa-border {
   padding: .2em .25em .15em;
   border: solid 1px #eeeeee;
-  border-radius: 3px;
+  border-width: .08em;
-}
+  border-radius: .1em;
-.fa-2x {
-  font-size: 2em;
-}
-.fa-2x.fa-border {
-  border-width: 2px;
-  border-radius: 4px;
-}
-.fa-3x {
-  font-size: 3em;
-}
-.fa-3x.fa-border {
-  border-width: 3px;
-  border-radius: 5px;
-}
-.fa-4x {
-  font-size: 4em;
-}
-.fa-4x.fa-border {
-  border-width: 4px;
-  border-radius: 6px;
-}
-.fa-5x {
-  font-size: 5em;
-}
-.fa-5x.fa-border {
-  border-width: 5px;
-  border-radius: 7px;
 }
 .pull-right {
   float: right;
@@ -127,30 +98,6 @@
 .fa.pull-right {
   margin-left: .3em;
 }
-/* EXTRAS
- * -------------------------- */
-/* Stacked and layered icon */
-.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;
-  text-align: center;
-}
-.fa-stack .fa-stack-base {
-  font-size: 2em;
-}
-/* Animated rotating icon */
 .fa-spin {
   -webkit-animation: spin 2s infinite linear;
   -moz-animation: spin 2s infinite linear;
@@ -235,6 +182,29 @@
   -o-transform: scale(1, -1);
   transform: scale(1, -1);
 }
+.fa-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.fa-stack-top,
+.fa-stack-bottom {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+.fa-stack-top {
+  line-height: inherit;
+}
+.fa-stack-bottom {
+  font-size: 2em;
+}
+.fa-inverse {
+  color: #ffffff;
+}
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
 .fa-glass:before {

css/font-awesome.min.css

@@ -1,29 +1,28 @@
 @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-2x{font-size:2em}
+.fa-3x{font-size:3em}
+.fa-4x{font-size:4em}
+.fa-5x{font-size:5em}
 .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}
+.fa-border{padding:.2em .25em .15em;border:solid 1px #eee;border-width:.08em;border-radius:.1em}
-.fa-muted{color:#eee}
-.fa-light{color:#fff}
-.fa-dark{color:#333}
-.fa-border{padding:.2em .25em .15em;border:solid 1px #eee;border-radius:3px}
-.fa-2x{font-size:2em}.fa-2x.fa-border{border-width:2px;border-radius:4px}
-.fa-3x{font-size:3em}.fa-3x.fa-border{border-width:3px;border-radius:5px}
-.fa-4x{font-size:4em}.fa-4x.fa-border{border-width:4px;border-radius:6px}
-.fa-5x{font-size:5em}.fa-5x.fa-border{border-width:5px;border-radius:7px}
 .pull-right{float:right}
 .pull-left{float:left}
 .fa.pull-left{margin-right:.3em}
 .fa.pull-right{margin-left:.3em}
-.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;text-align:center}
-.fa-stack .fa-stack-base{font-size:2em}
 .fa-spin{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}
 @-moz-keyframes spin{0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)} 100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)} 100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)} 100%{transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
 .fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
 .fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}
 .fa-flip-horizontal{-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1)}
 .fa-flip-vertical{-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1)}
+.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}
+.fa-stack-top,.fa-stack-bottom{position:absolute;width:100%;text-align:center}
+.fa-stack-top{line-height:inherit}
+.fa-stack-bottom{font-size:2em}
+.fa-inverse{color:#fff}
 .fa-glass:before{content:"\f000"}
 .fa-music:before{content:"\f001"}
 .fa-search:before{content:"\f002"}

less/bordered-pulled.less

@@ -0,0 +1,17 @@
+// Bordered & Pulled
+// -------------------------
+
+.@{fa-css-prefix}-border {
+  padding: .2em .25em .15em;
+  border: solid 1px @fa-border-color;
+  border-width: .08em;
+  border-radius: .1em;
+}
+
+.pull-right { float: right; }
+.pull-left { float: left; }
+
+.@{fa-css-prefix} {
+  &.pull-left { margin-right: .3em; }
+  &.pull-right { margin-left: .3em; }
+}

less/core.less

@@ -1,5 +1,5 @@
-/* FONT AWESOME CORE
+// Base Class Definition
- * -------------------------- */
+// -------------------------
 
 .@{fa-css-prefix} {
   display: inline-block;
@@ -10,101 +10,3 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-/* makes the font 33% larger relative to the icon container */
-.@{fa-css-prefix}-lg {
-  font-size: (4em / 3);
-  line-height: (3em / 4);
-  vertical-align: -15%;
-}
-
-.@{fa-css-prefix}-fw {
-  width: (18em / 14);
-  text-align: center;
-}
-
-
-// Icon UL & LI
-// -------------------------
-
-.@{fa-css-prefix}-ul {
-  padding-left: 0;
-  margin-left: @fa-icon-li-width;
-  list-style-type: none;
-
-  > li { position: relative; }
-}
-.@{fa-css-prefix}-li {
-  position: absolute;
-  left: -@fa-icon-li-width;
-  width: @fa-icon-li-width;
-  top: (2em / 14);
-  text-align: center;
-  &.@{fa-css-prefix}-lg {
-    left: -@fa-icon-li-width + (4em / 14);
-  }
-}
-
-
-// allows usage of the hide class directly on font awesome icons
-.@{fa-css-prefix}.hide { display: none; }
-
-.@{fa-css-prefix}-muted { color: @fa-icon-muted; }
-.@{fa-css-prefix}-light { color: @fa-icon-light; }
-.@{fa-css-prefix}-dark { color: @fa-icon-dark; }
-
-
-// Icon Borders
-// -------------------------
-
-.@{fa-css-prefix}-border {
-  padding: .2em .25em .15em;
-  border: solid 1px @fa-border-color;
-  border-radius: 3px;
-}
-
-
-// Icon Sizes
-// -------------------------
-
-.@{fa-css-prefix}-2x {
-  font-size: 2em;
-  &.@{fa-css-prefix}-border {
-    border-width: 2px;
-    border-radius: 4px;
-  }
-}
-.@{fa-css-prefix}-3x {
-  font-size: 3em;
-  &.@{fa-css-prefix}-border {
-    border-width: 3px;
-    border-radius: 5px;
-  }
-}
-.@{fa-css-prefix}-4x {
-  font-size: 4em;
-  &.@{fa-css-prefix}-border {
-    border-width: 4px;
-    border-radius: 6px;
-  }
-}
-.@{fa-css-prefix}-5x {
-  font-size: 5em;
-  &.@{fa-css-prefix}-border {
-    border-width: 5px;
-    border-radius: 7px;
-  }
-}
-
-
-// Floats & Margins
-// -------------------------
-
-// Quick floats
-.pull-right { float: right; }
-.pull-left { float: left; }
-
-.@{fa-css-prefix} {
-  &.pull-left { margin-right: .3em; }
-  &.pull-right { margin-left: .3em; }
-}

less/extras.less

@@ -1,45 +1,2 @@
-/* EXTRAS
+// Extras
- * -------------------------- */
+// --------------------------
-
-/* Stacked and layered icon */
-.fa-icon-stack();
-
-/* Animated rotating icon */
-.@{fa-css-prefix}-spin {
-  -webkit-animation: spin 2s infinite linear;
-  -moz-animation: spin 2s infinite linear;
-  -o-animation: spin 2s infinite linear;
-  animation: spin 2s infinite linear;
-}
-
-@-moz-keyframes spin {
-  0% { -moz-transform: rotate(0deg); }
-  100% { -moz-transform: rotate(359deg); }
-}
-@-webkit-keyframes spin {
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(359deg); }
-}
-@-o-keyframes spin {
-  0% { -o-transform: rotate(0deg); }
-  100% { -o-transform: rotate(359deg); }
-}
-@-ms-keyframes spin {
-  0% { -ms-transform: rotate(0deg); }
-  100% { -ms-transform: rotate(359deg); }
-}
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(359deg); }
-}
-
-
-// Icon rotations & flipping
-// -------------------------
-
-.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }
-.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
-.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
-
-.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1); }
-.@{fa-css-prefix}-flip-vertical   { .fa-icon-flip(1, -1); }

less/fixed-width.less

@@ -0,0 +1,6 @@
+// Fixed Width Icons
+// -------------------------
+.@{fa-css-prefix}-fw {
+  width: (18em / 14);
+  text-align: center;
+}

less/font-awesome.less

@@ -24,9 +24,15 @@
  *  Work: Lead Product Designer @ Kyruus - http://kyruus.com
  */
 
-@import "variables.less";
+@import "variables";
-@import "mixins.less";
+@import "mixins";
-@import "path.less";
+@import "path";
-@import "core.less";
+@import "core";
-@import "extras.less";
+@import "larger";
-@import "icons.less";
+@import "fixed-width";
+@import "list";
+@import "bordered-pulled";
+@import "spinning";
+@import "rotated-flipped";
+@import "stacked";
+@import "icons";

less/larger.less

@@ -0,0 +1,13 @@
+// Icon Sizes
+// -------------------------
+
+/* makes the font 33% larger relative to the icon container */
+.@{fa-css-prefix}-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -15%;
+}
+.@{fa-css-prefix}-2x { font-size: 2em; }
+.@{fa-css-prefix}-3x { font-size: 3em; }
+.@{fa-css-prefix}-4x { font-size: 4em; }
+.@{fa-css-prefix}-5x { font-size: 5em; }

less/list.less

@@ -0,0 +1,20 @@
+// Icon UL & LI
+// -------------------------
+
+.@{fa-css-prefix}-ul {
+  padding-left: 0;
+  margin-left: @fa-icon-li-width;
+  list-style-type: none;
+  > li { position: relative; }
+}
+.@{fa-css-prefix}-li {
+  position: absolute;
+  left: -@fa-icon-li-width;
+  width: @fa-icon-li-width;
+  top: (2em / 14);
+  text-align: center;
+  &.@{fa-css-prefix}-lg {
+    left: -@fa-icon-li-width + (4em / 14);
+  }
+}
+

less/mixins.less

@@ -17,26 +17,3 @@
        -o-transform: scale(@horiz, @vert);
           transform: scale(@horiz, @vert);
 }
-
-.fa-icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
-  .@{fa-css-prefix}-stack {
-    position: relative;
-    display: inline-block;
-    width: @width;
-    height: @height;
-    line-height: @width;
-    vertical-align: -35%;
-    .@{fa-css-prefix} {
-      position: absolute;
-      display: block;
-      width: 100%;
-      height: 100%;
-      font-size: @top-font-size;
-      line-height: inherit;
-      text-align: center;
-    }
-    .@{fa-css-prefix}-stack-base {
-      font-size: @base-font-size;
-    }
-  }
-}

less/rotated-flipped.less

@@ -0,0 +1,9 @@
+// Rotated & Flipped Icons
+// -------------------------
+
+.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }
+.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
+.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
+
+.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1); }
+.@{fa-css-prefix}-flip-vertical   { .fa-icon-flip(1, -1); }

less/spinning.less

@@ -0,0 +1,30 @@
+// Spinning Icons
+// --------------------------
+
+.@{fa-css-prefix}-spin {
+  -webkit-animation: spin 2s infinite linear;
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+}
+
+@-moz-keyframes spin {
+  0% { -moz-transform: rotate(0deg); }
+  100% { -moz-transform: rotate(359deg); }
+}
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(359deg); }
+}
+@-o-keyframes spin {
+  0% { -o-transform: rotate(0deg); }
+  100% { -o-transform: rotate(359deg); }
+}
+@-ms-keyframes spin {
+  0% { -ms-transform: rotate(0deg); }
+  100% { -ms-transform: rotate(359deg); }
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(359deg); }
+}

less/stacked.less

@@ -0,0 +1,19 @@
+// Stacked Icons
+// -------------------------
+
+.@{fa-css-prefix}-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.@{fa-css-prefix}-stack-top, .@{fa-css-prefix}-stack-bottom {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+.@{fa-css-prefix}-stack-top { line-height: inherit; }
+.@{fa-css-prefix}-stack-bottom { font-size: 2em; }
+.@{fa-css-prefix}-inverse { color: @fa-icon-inverse; }

less/variables.less

@@ -6,9 +6,7 @@
 @fa-css-prefix:       fa;
 @fa-version:          "4.0.0";
 @fa-border-color:     #eee;
-@fa-icon-muted:       #eee;
+@fa-icon-inverse:     #fff;
-@fa-icon-light:       #fff;
-@fa-icon-dark:        #333;
 @fa-icon-li-width:    (30em / 14);
 
 @fa-var-glass: "\f000";

scss/_core.scss

@@ -17,14 +17,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/_includes/examples/bordered-pulled.html

@@ -9,13 +9,13 @@
     </div>
     <div class="col-md-9 col-sm-8">
       <div class="well well-large well-transparent">
-        <i class="fa fa-quote-left fa-4x pull-left fa-muted"></i>
+        <i class="fa fa-quote-left fa-4x pull-left"></i>
         Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
         Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all
         of them in any combination to get lots of new possibilities.
       </div>
 {% highlight html %}
-<i class="fa fa-quote-left fa-4x pull-left fa-muted"></i>
+<i class="fa fa-quote-left fa-4x pull-left"></i>
 Use a few of the new styles together ... lots of new possibilities.
 {% endhighlight %}
       <div class="well well-large well-transparent clearfix">

src/_includes/examples/fixed-width.html

@@ -11,7 +11,7 @@
     </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.
+        The <code>fa-fw</code> sets icons at a fixed width. 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">

src/_includes/examples/list.html

@@ -1,5 +1,5 @@
-<section id="list-bullets">
+<section id="list-icons">
-  <h2 class="page-header">List Bullets</h2>
+  <h2 class="page-header">List Icons</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <ul class="fa-ul">
@@ -12,7 +12,7 @@
       </ul>
     </div>
     <div class="col-md-9 col-sm-8">
-      <p>Easily replace individual list bullets.</p>
+      <p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace individual list bullets.</p>
 {% highlight html %}
 <ul class="fa-ul">
   <li><i class="fa-li fa fa-check"></i>Bulleted lists (like this one)</li>

src/_includes/examples/new.html

@@ -23,12 +23,12 @@
           fa-twitter on fa-unchecked<br>
           <span class="fa-stack">
             <i class="fa fa-circle fa-stack-base"></i>
-            <i class="fa fa-flag fa-light"></i>
+            <i class="fa fa-flag fa-inverse"></i>
           </span>
           fa-flag on fa-circle<br>
           <span class="fa-stack">
             <i class="fa fa-square fa-stack-base"></i>
-            <i class="fa fa-terminal fa-light"></i>
+            <i class="fa fa-terminal fa-inverse"></i>
           </span>
           fa-terminal on fa-square<br>
           <span class="fa-stack">

src/_includes/examples/stacked.html

@@ -2,51 +2,52 @@
   <h2 class="page-header">Stacked Icons</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
-      A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent and
+      A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent, the <code>fa-stack-top</code>
-      <code>fa-stack-base</code> for the bottom icon.
+      for the regularly sized icon, and <code>fa-stack-bottom</code> for the larger bottom icon. <code>fa-inverse</code>
+      can be used as an alternative icon color.
     </div>
     <div class="col-md-9 col-sm-8">
       <div class="well well-large well-transparent lead">
         <span class="fa-stack">
-          <i class="fa fa-unchecked fa-stack-base"></i>
+          <i class="fa fa-square-o fa-stack-bottom"></i>
-          <i class="fa fa-twitter"></i>
+          <i class="fa fa-twitter fa-stack-top"></i>
         </span>
         fa-twitter on fa-unchecked<br>
         <span class="fa-stack">
-          <i class="fa fa-circle fa-stack-base"></i>
+          <i class="fa fa-circle fa-stack-bottom"></i>
-          <i class="fa fa-flag fa-light"></i>
+          <i class="fa fa-flag fa-stack-top fa-inverse"></i>
         </span>
         fa-flag on fa-circle<br>
         <span class="fa-stack">
-          <i class="fa fa-square fa-stack-base"></i>
+          <i class="fa fa-square fa-stack-bottom"></i>
-          <i class="fa fa-terminal fa-light"></i>
+          <i class="fa fa-terminal fa-stack-top fa-inverse"></i>
         </span>
         fa-terminal on fa-square<br>
         <span class="fa-stack">
-          <i class="fa fa-camera"></i>
+          <i class="fa fa-camera fa-stack-top"></i>
-          <i class="fa fa-ban fa-stack-base text-danger"></i>
+          <i class="fa fa-ban fa-stack-bottom text-danger"></i>
         </span>
         fa-camera on fa-ban
       </div>
 {% highlight html %}
 <span class="fa-stack">
-  <i class="fa fa-unchecked fa-stack-base"></i>
+  <i class="fa fa-square-o fa-stack-bottom"></i>
-  <i class="fa fa-twitter"></i>
+  <i class="fa fa-twitter fa-stack-top"></i>
 </span>
 fa-twitter on fa-unchecked<br>
 <span class="fa-stack">
-  <i class="fa fa-circle fa-stack-base"></i>
+  <i class="fa fa-circle fa-stack-bottom"></i>
-  <i class="fa fa-flag fa-light"></i>
+  <i class="fa fa-flag fa-stack-top fa-inverse"></i>
 </span>
 fa-flag on fa-circle<br>
 <span class="fa-stack">
-  <i class="fa fa-sign-blank fa-stack-base"></i>
+  <i class="fa fa-sign-blank fa-stack-bottom"></i>
-  <i class="fa fa-terminal fa-light"></i>
+  <i class="fa fa-terminal fa-stack-top fa-inverse"></i>
 </span>
 fa-terminal on fa-sign-blank<br>
 <span class="fa-stack">
-  <i class="fa fa-camera"></i>
+  <i class="fa fa-camera fa-stack-top"></i>
-  <i class="fa fa-ban-circle fa-stack-base text-danger"></i>
+  <i class="fa fa-ban-circle fa-stack-bottom text-danger"></i>
 </span>
 fa-camera on fa-ban-circle
 {% endhighlight %}

src/_includes/navbar.html

@@ -50,7 +50,7 @@
             <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/#list-icons">List Icons</a></li>
             <li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled</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>

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

@@ -1,22 +1,22 @@
 <p>
   <a href="#">
     <span class="fa-stack">
-      <i class="fa fa-square fa-stack-base"></i>
+      <i class="fa fa-square fa-stack-bottom"></i>
-      <i class="fa fa-twitter fa-light"></i>
+      <i class="fa fa-twitter fa-stack-top fa-inverse"></i>
     </span>
     Twitter Icon
   </a>
   <a href="#">
     <span class="fa-stack">
-      <i class="fa fa-square fa-stack-base"></i>
+      <i class="fa fa-square fa-stack-bottom"></i>
-      <i class="fa fa-facebook fa-light"></i>
+      <i class="fa fa-facebook fa-stack-top fa-inverse"></i>
     </span>
     Facebook Icon
   </a>
   <a href="#">
     <span class="fa-stack">
-      <i class="fa fa-square fa-stack-base"></i>
+      <i class="fa fa-square fa-stack-bottom"></i>
-      <i class="fa fa-github fa-light"></i>
+      <i class="fa fa-github fa-stack-top fa-inverse"></i>
     </span>
     GitHub Icon
   </a>
@@ -24,22 +24,22 @@
 <p>
   <a href="#">
     <span class="fa-stack">
-      <i class="fa fa-circle fa-stack-base"></i>
+      <i class="fa fa-circle fa-stack-bottom"></i>
-      <i class="fa fa-twitter fa-light"></i>
+      <i class="fa fa-twitter fa-stack-top fa-inverse"></i>
     </span>
     Twitter Icon
   </a>
   <a href="#">
     <span class="fa-stack">
-      <i class="fa fa-circle fa-stack-base"></i>
+      <i class="fa fa-circle fa-stack-bottom"></i>
-      <i class="fa fa-facebook fa-light"></i>
+      <i class="fa fa-facebook fa-stack-top fa-inverse"></i>
     </span>
     Facebook Icon
   </a>
   <a href="#">
     <span class="fa-stack">
-      <i class="fa fa-circle fa-stack-base"></i>
+      <i class="fa fa-circle fa-stack-bottom"></i>
-      <i class="fa fa-github fa-light"></i>
+      <i class="fa fa-github fa-stack-top fa-inverse"></i>
     </span>
     GitHub Icon
   </a>
@@ -47,22 +47,22 @@
 <p>
   <a href="#">
     <span class="fa-stack">
-      <i class="fa fa-circle-o fa-stack-base"></i>
+      <i class="fa fa-circle-o fa-stack-bottom"></i>
-      <i class="fa fa-twitter"></i>
+      <i class="fa fa-twitter fa-stack-top"></i>
     </span>
     Twitter Icon
   </a>
   <a href="#">
     <span class="fa-stack">
-      <i class="fa fa-circle-o fa-stack-base"></i>
+      <i class="fa fa-circle-o fa-stack-bottom"></i>
-      <i class="fa fa-facebook"></i>
+      <i class="fa fa-facebook fa-stack-top"></i>
     </span>
     Facebook Icon
   </a>
   <a href="#">
     <span class="fa-stack">
-      <i class="fa fa-circle-o fa-stack-base"></i>
+      <i class="fa fa-circle-o fa-stack-bottom"></i>
-      <i class="fa fa-github"></i>
+      <i class="fa fa-github fa-stack-top"></i>
     </span>
     GitHub Icon
   </a>

src/_includes/tests/stacked.html

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

src/assets/font-awesome/less/bordered-pulled.less

@@ -0,0 +1,20 @@
+---
+---
+
+// Bordered & Pulled
+// -------------------------
+
+.@{fa-css-prefix}-border {
+  padding: .2em .25em .15em;
+  border: solid 1px @fa-border-color;
+  border-width: .08em;
+  border-radius: .1em;
+}
+
+.pull-right { float: right; }
+.pull-left { float: left; }
+
+.@{fa-css-prefix} {
+  &.pull-left { margin-right: .3em; }
+  &.pull-right { margin-left: .3em; }
+}

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

@@ -1,7 +1,8 @@
 ---
 ---
-/* FONT AWESOME CORE
+
- * -------------------------- */
+// Base Class Definition
+// -------------------------
 
 .@{fa-css-prefix} {
   display: inline-block;
@@ -12,101 +13,3 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-/* makes the font 33% larger relative to the icon container */
-.@{fa-css-prefix}-lg {
-  font-size: (4em / 3);
-  line-height: (3em / 4);
-  vertical-align: -15%;
-}
-
-.@{fa-css-prefix}-fw {
-  width: (18em / 14);
-  text-align: center;
-}
-
-
-// Icon UL & LI
-// -------------------------
-
-.@{fa-css-prefix}-ul {
-  padding-left: 0;
-  margin-left: @fa-icon-li-width;
-  list-style-type: none;
-
-  > li { position: relative; }
-}
-.@{fa-css-prefix}-li {
-  position: absolute;
-  left: -@fa-icon-li-width;
-  width: @fa-icon-li-width;
-  top: (2em / 14);
-  text-align: center;
-  &.@{fa-css-prefix}-lg {
-    left: -@fa-icon-li-width + (4em / 14);
-  }
-}
-
-
-// allows usage of the hide class directly on font awesome icons
-.@{fa-css-prefix}.hide { display: none; }
-
-.@{fa-css-prefix}-muted { color: @fa-icon-muted; }
-.@{fa-css-prefix}-light { color: @fa-icon-light; }
-.@{fa-css-prefix}-dark { color: @fa-icon-dark; }
-
-
-// Icon Borders
-// -------------------------
-
-.@{fa-css-prefix}-border {
-  padding: .2em .25em .15em;
-  border: solid 1px @fa-border-color;
-  border-radius: 3px;
-}
-
-
-// Icon Sizes
-// -------------------------
-
-.@{fa-css-prefix}-2x {
-  font-size: 2em;
-  &.@{fa-css-prefix}-border {
-    border-width: 2px;
-    border-radius: 4px;
-  }
-}
-.@{fa-css-prefix}-3x {
-  font-size: 3em;
-  &.@{fa-css-prefix}-border {
-    border-width: 3px;
-    border-radius: 5px;
-  }
-}
-.@{fa-css-prefix}-4x {
-  font-size: 4em;
-  &.@{fa-css-prefix}-border {
-    border-width: 4px;
-    border-radius: 6px;
-  }
-}
-.@{fa-css-prefix}-5x {
-  font-size: 5em;
-  &.@{fa-css-prefix}-border {
-    border-width: 5px;
-    border-radius: 7px;
-  }
-}
-
-
-// Floats & Margins
-// -------------------------
-
-// Quick floats
-.pull-right { float: right; }
-.pull-left { float: left; }
-
-.@{fa-css-prefix} {
-  &.pull-left { margin-right: .3em; }
-  &.pull-right { margin-left: .3em; }
-}

src/assets/font-awesome/less/fixed-width.less

@@ -0,0 +1,9 @@
+---
+---
+
+// Fixed Width Icons
+// -------------------------
+.@{fa-css-prefix}-fw {
+  width: (18em / 14);
+  text-align: center;
+}

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

@@ -2,9 +2,15 @@
 ---
 {% include license-code.less %}
 
-@import "variables.less";
+@import "variables";
-@import "mixins.less";
+@import "mixins";
-@import "path.less";
+@import "path";
-@import "core.less";
+@import "core";
-@import "extras.less";
+@import "larger";
-@import "icons.less";
+@import "fixed-width";
+@import "list";
+@import "bordered-pulled";
+@import "spinning";
+@import "rotated-flipped";
+@import "stacked";
+@import "icons";

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

@@ -0,0 +1,16 @@
+---
+---
+
+// Icon Sizes
+// -------------------------
+
+/* makes the font 33% larger relative to the icon container */
+.@{fa-css-prefix}-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -15%;
+}
+.@{fa-css-prefix}-2x { font-size: 2em; }
+.@{fa-css-prefix}-3x { font-size: 3em; }
+.@{fa-css-prefix}-4x { font-size: 4em; }
+.@{fa-css-prefix}-5x { font-size: 5em; }

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

@@ -0,0 +1,23 @@
+---
+---
+
+// Icon UL & LI
+// -------------------------
+
+.@{fa-css-prefix}-ul {
+  padding-left: 0;
+  margin-left: @fa-icon-li-width;
+  list-style-type: none;
+  > li { position: relative; }
+}
+.@{fa-css-prefix}-li {
+  position: absolute;
+  left: -@fa-icon-li-width;
+  width: @fa-icon-li-width;
+  top: (2em / 14);
+  text-align: center;
+  &.@{fa-css-prefix}-lg {
+    left: -@fa-icon-li-width + (4em / 14);
+  }
+}
+

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

@@ -19,26 +19,3 @@
        -o-transform: scale(@horiz, @vert);
           transform: scale(@horiz, @vert);
 }
-
-.fa-icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
-  .@{fa-css-prefix}-stack {
-    position: relative;
-    display: inline-block;
-    width: @width;
-    height: @height;
-    line-height: @width;
-    vertical-align: -35%;
-    .@{fa-css-prefix} {
-      position: absolute;
-      display: block;
-      width: 100%;
-      height: 100%;
-      font-size: @top-font-size;
-      line-height: inherit;
-      text-align: center;
-    }
-    .@{fa-css-prefix}-stack-base {
-      font-size: @base-font-size;
-    }
-  }
-}

src/assets/font-awesome/less/rotated-flipped.less

@@ -0,0 +1,12 @@
+---
+---
+
+// Rotated & Flipped Icons
+// -------------------------
+
+.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }
+.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
+.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
+
+.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1); }
+.@{fa-css-prefix}-flip-vertical   { .fa-icon-flip(1, -1); }

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

@@ -1,12 +1,9 @@
 ---
 ---
-/* EXTRAS
- * -------------------------- */
 
-/* Stacked and layered icon */
+// Spinning Icons
-.fa-icon-stack();
+// --------------------------
 
-/* Animated rotating icon */
 .@{fa-css-prefix}-spin {
   -webkit-animation: spin 2s infinite linear;
   -moz-animation: spin 2s infinite linear;
@@ -34,14 +31,3 @@
   0% { transform: rotate(0deg); }
   100% { transform: rotate(359deg); }
 }
-
-
-// Icon rotations & flipping
-// -------------------------
-
-.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }
-.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
-.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
-
-.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1); }
-.@{fa-css-prefix}-flip-vertical   { .fa-icon-flip(1, -1); }

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

@@ -0,0 +1,22 @@
+---
+---
+
+// Stacked Icons
+// -------------------------
+
+.@{fa-css-prefix}-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.@{fa-css-prefix}-stack-top, .@{fa-css-prefix}-stack-bottom {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+.@{fa-css-prefix}-stack-top { line-height: inherit; }
+.@{fa-css-prefix}-stack-bottom { font-size: 2em; }
+.@{fa-css-prefix}-inverse { color: @fa-icon-inverse; }

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

@@ -8,9 +8,7 @@
 @fa-css-prefix:       {{ site.fontawesome.css_prefix }};
 @fa-version:          "{{ site.fontawesome.version }}";
 @fa-border-color:     #eee;
-@fa-icon-muted:       #eee;
+@fa-icon-inverse:     #fff;
-@fa-icon-light:       #fff;
-@fa-icon-dark:        #333;
 @fa-icon-li-width:    (30em / 14);
 
 {% for icon in icons %}@fa-var-{{ icon.id }}: "\{{ icon.unicode }}";

src/examples.html

@@ -23,7 +23,7 @@ relative_path: ../
   {% include examples/inline-icons.html %}
   {% include examples/larger-icons.html %}
   {% include examples/fixed-width.html %}
-  {% include examples/lists.html %}
+  {% include examples/list.html %}
   {% include examples/bordered-pulled.html %}
   {% include examples/spinning.html %}
   {% include examples/rotated-flipped.html %}

src/test.html

@@ -88,10 +88,10 @@ relative_path: ../
       <a href="#"><i class="fa fa-caret-down padding-right"></i>Link Here</a>
     </div>
     <div class="col-md-2">
-      <a href="#">Link Here<i class="fa fa-double-angle-right padding-left"></i></a>
+      <a href="#">Link Here<i class="fa fa-angle-double-right padding-left"></i></a>
     </div>
     <div class="col-md-2">
-      <a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left"></i></a>
+      <a href="#">Link Here<i class="fa fa-angle-double-right fa-lg padding-left"></i></a>
     </div>
     <div class="col-md-2">
       <a href="#">Link Here<i class="fa fa-caret-down padding-left"></i></a>
@@ -108,10 +108,10 @@ relative_path: ../
       <a href="#"><i class="fa fa-caret-down padding-right-sm"></i>Link Here</a>
     </div>
     <div class="col-md-2">
-      <a href="#">Link Here<i class="fa fa-double-angle-right padding-left-sm"></i></a>
+      <a href="#">Link Here<i class="fa fa-angle-double-right padding-left-sm"></i></a>
     </div>
     <div class="col-md-2">
-      <a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left-sm"></i></a>
+      <a href="#">Link Here<i class="fa fa-angle-double-right fa-lg padding-left-sm"></i></a>
     </div>
     <div class="col-md-2">
       <a href="#">Link Here<i class="fa fa-caret-down padding-left-sm"></i></a>
@@ -541,7 +541,7 @@ relative_path: ../
     <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul class="fa-ul">
-          <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><i class="fa-li fa fa-angle-double-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
           <li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             <i class="fa fa-building"></i>
@@ -554,9 +554,13 @@ relative_path: ../
     <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul class="fa-ul">
-          <li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><i class="fa-li fa fa-angle-double-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><i class="fa-li fa fa-arrow-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
-          <li><i class="fa-li fa fa-building fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><i class="fa-li fa fa-building fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            <i class="fa fa-building"></i>
+            <span class="label label-default">foo</span>
+            <a class="btn btn-default btn-xs">foo</a>
+          </li>
         </ul>
       </div>
     </div>
@@ -565,7 +569,7 @@ relative_path: ../
     <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul class="fa-ul lead">
-          <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><i class="fa-li fa fa-angle-double-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
           <li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
         </ul>
@@ -574,7 +578,7 @@ relative_path: ../
     <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul class="fa-ul lead">
-          <li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><i class="fa-li fa fa-angle-double-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><i class="fa-li fa fa-arrow-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
           <li><i class="fa-li fa fa-building fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
         </ul>
@@ -585,7 +589,7 @@ relative_path: ../
     <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul class="fa-ul">
-          <li><a href="#"><i class="fa-li fa fa-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><a href="#"><i class="fa-li fa fa-angle-double-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><a href="#"><i class="fa-li fa fa-arrow-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
           <li><a href="#"><i class="fa-li fa fa-building"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
         </ul>
@@ -594,7 +598,7 @@ relative_path: ../
     <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul class="fa-ul">
-          <li><a href="#"><i class="fa-li fa fa-double-angle-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li><a href="#"><i class="fa-li fa fa-angle-double-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><a href="#"><i class="fa-li fa fa-arrow-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
           <li><a href="#"><i class="fa-li fa fa-building fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
         </ul>