re-porting to scss, fixing some fa variable names

_config.yml

@@ -11,7 +11,7 @@ pygments:         true
 permalink:        pretty
 
 # ensures SCSS files are compiled
-include:          [_bootstrap.scss, _core.scss, _extras.scss, _icons.scss, _mixins.scss, _path.scss, _variables.scss]
+include:          [_bordered-pulled.scss, _core.scss, _fixed-width.scss, _icons.scss, _larger.scss, _list.scss, _mixins.scss, _path.scss, _rotated-flipped.scss, _spinning.scss, _stacked.scss, _variables.scss]
 
 # used in building icon pages
 icon_meta:        src/icons.yml

less/bordered-pulled.less

@@ -3,8 +3,7 @@
 
 .@{fa-css-prefix}-border {
   padding: .2em .25em .15em;
-  border: solid 1px @fa-border-color;
-  border-width: .08em;
+  border: solid .08em @fa-border-color;
   border-radius: .1em;
 }
 

less/list.less

@@ -3,18 +3,17 @@
 
 .@{fa-css-prefix}-ul {
   padding-left: 0;
-  margin-left: @fa-icon-li-width;
+  margin-left: @fa-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;
+  left: -@fa-li-width;
+  width: @fa-li-width;
   top: (2em / 14);
   text-align: center;
   &.@{fa-css-prefix}-lg {
-    left: -@fa-icon-li-width + (4em / 14);
+    left: -@fa-li-width + (4em / 14);
   }
 }
-

less/stacked.less

@@ -16,4 +16,4 @@
 }
 .@{fa-css-prefix}-stack-top { line-height: inherit; }
 .@{fa-css-prefix}-stack-bottom { font-size: 2em; }
-.@{fa-css-prefix}-inverse { color: @fa-icon-inverse; }
+.@{fa-css-prefix}-inverse { color: @fa-inverse; }

less/variables.less

@@ -2,12 +2,12 @@
 // --------------------------
 
 @fa-font-path:        "../fonts";
-//@fa-font-path:       "//netdna.bootstrapcdn.com/font-awesome/4.0.0/font"; // for referencing Bootstrap CDN font files directly
+//@fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.0.0/font"; // for referencing Bootstrap CDN font files directly
 @fa-css-prefix:       fa;
 @fa-version:          "4.0.0";
 @fa-border-color:     #eee;
-@fa-icon-inverse:     #fff;
-@fa-icon-li-width:    (30em / 14);
+@fa-inverse:          #fff;
+@fa-li-width:         (30em / 14);
 
 @fa-var-glass: "\f000";
 @fa-var-music: "\f001";

scss/_bordered-pulled.scss

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

scss/_core.scss

@@ -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}-fixed-width {
- 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; }
-}

scss/_extras.scss

@@ -2,7 +2,6 @@
  * -------------------------- */
 
 /* Stacked and layered icon */
-@include fa-icon-stack();
 
 /* Animated rotating icon */
 .#{$fa-css-prefix}-spin {
@@ -41,5 +40,5 @@
 .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
 .#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
 
-.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1); }
-.#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1); }
+.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
+.#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }

scss/_fixed-width.scss

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

scss/_larger.scss

@@ -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; }

scss/_list.scss

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

scss/_mixins.scss

@@ -10,33 +10,11 @@
           transform: rotate($degrees);
 }
 
-@mixin fa-icon-flip($horiz, $vert) {
+@mixin fa-icon-flip($horiz, $vert, $rotation) {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
   -webkit-transform: scale($horiz, $vert);
      -moz-transform: scale($horiz, $vert);
       -ms-transform: scale($horiz, $vert);
        -o-transform: scale($horiz, $vert);
           transform: scale($horiz, $vert);
 }
-
-@mixin 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;
-    }
-  }
-}

scss/_rotated-flipped.scss

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

scss/_spinning.scss

@@ -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); }
+}

scss/_stacked.scss

@@ -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-inverse; }

scss/_variables.scss

@@ -6,10 +6,8 @@ $fa-font-path:        "../fonts" !default;
 $fa-css-prefix:       fa;
 $fa-version:          "4.0.0" !default;
 $fa-border-color:     #eee !default;
-$fa-icon-muted:       #eee !default;
-$fa-icon-light:       #fff !default;
-$fa-icon-dark:        #333 !default;
-$fa-icon-li-width:    (30em / 14);
+$fa-inverse:          #fff !default;
+$fa-li-width:        (30em / 14);
 
 $fa-var-glass: "\f000";
 $fa-var-music: "\f001";

scss/font-awesome.scss

@@ -28,5 +28,11 @@
 @import "mixins";
 @import "path";
 @import "core";
-@import "extras";
+@import "larger";
+@import "fixed-width";
+@import "list";
+@import "bordered-pulled";
+@import "spinning";
+@import "rotated-flipped";
+@import "stacked";
 @import "icons";

src/Makefile

@@ -23,9 +23,9 @@ build:
 	@echo "Compiling Less files"
 	@mkdir -p ${FA_CSS_DIRECTORY}
 
-	lessc ${FA_LESS_MODERN} > ${FA_CSS_MODERN}
-	lessc --compress ${FA_LESS_MODERN} > ${FA_CSS_MODERN_MIN}
-#	sass ${FA_SCSS_MODERN} ${FA_CSS_MODERN}
+#	lessc ${FA_LESS_MODERN} > ${FA_CSS_MODERN}
+#	lessc --compress ${FA_LESS_MODERN} > ${FA_CSS_MODERN_MIN}
+	sass ${FA_SCSS_MODERN} ${FA_CSS_MODERN}
 
 	lessc --compress ${SITE_LESS} > ${SITE_CSS_MIN}
 	cp -r ${FA_ROOT_DIRECTORY}/* ../

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

@@ -6,8 +6,7 @@
 
 .@{fa-css-prefix}-border {
   padding: .2em .25em .15em;
-  border: solid 1px @fa-border-color;
-  border-width: .08em;
+  border: solid .08em @fa-border-color;
   border-radius: .1em;
 }
 

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

@@ -6,18 +6,17 @@
 
 .@{fa-css-prefix}-ul {
   padding-left: 0;
-  margin-left: @fa-icon-li-width;
+  margin-left: @fa-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;
+  left: -@fa-li-width;
+  width: @fa-li-width;
   top: (2em / 14);
   text-align: center;
   &.@{fa-css-prefix}-lg {
-    left: -@fa-icon-li-width + (4em / 14);
+    left: -@fa-li-width + (4em / 14);
   }
 }
-

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

@@ -19,4 +19,4 @@
 }
 .@{fa-css-prefix}-stack-top { line-height: inherit; }
 .@{fa-css-prefix}-stack-bottom { font-size: 2em; }
-.@{fa-css-prefix}-inverse { color: @fa-icon-inverse; }
+.@{fa-css-prefix}-inverse { color: @fa-inverse; }

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

@@ -4,12 +4,12 @@
 // --------------------------
 
 @fa-font-path:        "../fonts";
-//@fa-font-path:       "//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version}}/font"; // for referencing Bootstrap CDN font files directly
+//@fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version}}/font"; // for referencing Bootstrap CDN font files directly
 @fa-css-prefix:       {{ site.fontawesome.css_prefix }};
 @fa-version:          "{{ site.fontawesome.version }}";
 @fa-border-color:     #eee;
-@fa-icon-inverse:     #fff;
-@fa-icon-li-width:    (30em / 14);
+@fa-inverse:          #fff;
+@fa-li-width:         (30em / 14);
 
 {% for icon in icons %}@fa-var-{{ icon.id }}: "\{{ icon.unicode }}";
 {% endfor %}

src/assets/font-awesome/scss/_bordered-pulled.scss

@@ -0,0 +1,19 @@
+---
+---
+
+// Bordered & Pulled
+// -------------------------
+
+.#{$fa-css-prefix}-border {
+  padding: .2em .25em .15em;
+  border: solid .08em $fa-border-color;
+  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/scss/_core.scss

@@ -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}-fixed-width {
- 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/scss/_fixed-width.scss

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

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

@@ -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/scss/_list.scss

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

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

@@ -12,33 +12,11 @@
           transform: rotate($degrees);
 }
 
-@mixin fa-icon-flip($horiz, $vert) {
+@mixin fa-icon-flip($horiz, $vert, $rotation) {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
   -webkit-transform: scale($horiz, $vert);
      -moz-transform: scale($horiz, $vert);
       -ms-transform: scale($horiz, $vert);
        -o-transform: scale($horiz, $vert);
           transform: scale($horiz, $vert);
 }
-
-@mixin 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/scss/_rotated-flipped.scss

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

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

@@ -1,12 +1,9 @@
 ---
 ---
-/* EXTRAS
- * -------------------------- */
 
-/* Stacked and layered icon */
-@include fa-icon-stack();
+// Spinning Icons
+// --------------------------
 
-/* 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  { @include fa-icon-rotate(90deg, 1);  }
-.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
-.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
-
-.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1); }
-.#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1); }

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

@@ -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-inverse; }

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

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

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

@@ -6,5 +6,11 @@
 @import "mixins";
 @import "path";
 @import "core";
-@import "extras";
+@import "larger";
+@import "fixed-width";
+@import "list";
+@import "bordered-pulled";
+@import "spinning";
+@import "rotated-flipped";
+@import "stacked";
 @import "icons";