Ported SCSS and Less changes to the ./src.

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

@@ -1,7 +1,7 @@
 ---
 ---
 
-// Animated Icons
+// animated icons
 // --------------------------
 
 .@{fa-css-prefix}-spin {

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

@@ -1,7 +1,7 @@
 ---
 ---
 
-// Bordered & Pulled
+// bordered and pulled
 // -------------------------
 
 .@{fa-css-prefix}-border {

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

@@ -1,7 +1,7 @@
 ---
 ---
 
-// Base Class Definition
+// base class definition
 // -------------------------
 
 .@{fa-css-prefix} {

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

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

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

@@ -1,12 +1,13 @@
 ---
 ---
+
 {% include code/license.css %}
 
 @import "variables.less";
 @import "mixins.less";
 @import "path.less";
 @import "core.less";
-@import "larger.less";
+@import "sizes.less";
 @import "fixed-width.less";
 @import "list.less";
 @import "bordered-pulled.less";

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

@@ -1,7 +1,15 @@
 ---
 ---
+
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
-{% for icon in icons %}{% for alias in icon.aliases %}
-.@{fa-css-prefix}-{{ alias }}:before,{% endfor %}
-.@{fa-css-prefix}-{{ icon.id }}:before { content: @fa-var-{{ icon.id }}; }{% endfor %}
+
+.createIconClasses(@iterator: 1) when(@iterator <= length(@fa-var-glyphs)) {
+  @fa-glyph-name: extract(extract(@fa-var-glyphs, @iterator), 1);
+  @fa-glyph-name-unquoted: ~"@{fa-glyph-name}";
+  .@{fa-css-prefix}-@{fa-glyph-name-unquoted}:before {
+    content: extract(extract(@fa-var-glyphs, @iterator), 2);
+  }
+  .createIconClasses((@iterator + 1));
+}
+.createIconClasses();

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

@@ -1,7 +1,7 @@
 ---
 ---
 
-// List Icons
+// list icons
 // -------------------------
 
 .@{fa-css-prefix}-ul {

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

@@ -1,17 +1,22 @@
 ---
 ---
-// Mixins
+
+// mixins
 // --------------------------
 
 .fa-icon() {
 {% include code/core.less %}
 }
 
-.fa-icon-rotate(@degrees, @rotation) {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation);
-  -webkit-transform: rotate(@degrees);
-      -ms-transform: rotate(@degrees);
-          transform: rotate(@degrees);
+.fa-icon-rotate(@degrees) {
+  // check if this ie fix is necessary
+  & when (mod(@degrees, 90) = 0) {
+    @rotation: @degrees / 90;
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation);
+  }
+  -webkit-transform: rotate(~"@{degrees}deg");
+      -ms-transform: rotate(~"@{degrees}deg");
+          transform: rotate(~"@{degrees}deg");
 }
 
 .fa-icon-flip(@horiz, @vert, @rotation) {

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

@@ -1,8 +1,13 @@
-/* FONT PATH
- * -------------------------- */
+---
+---
+
+// font path
+// --------------------------
 
 @font-face {
   font-family: 'FontAwesome';
+  font-style: normal;
+  font-weight: normal;
   src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
   src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
     url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
@@ -10,6 +15,4 @@
     url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
     url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
 //  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
-  font-weight: normal;
-  font-style: normal;
 }

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

@@ -1,23 +1,41 @@
 ---
 ---
 
-// Rotated & Flipped Icons
+// rotated and 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); }
+@rotations-requiring-ie-fix:
+  "flip-horizontal",
+  "flip-vertical";
+@rotation-selector: '';
 
+// calculate classes and values for rotation
+.calculateRotations(@i) when (@i >= 0) {
+  @rotation-selector: ~"@{fa-css-prefix}-rotate-@{i}";
+  .@{rotation-selector} when (mod(@i, @fa-rotation-increment) = 0) {
+    .fa-icon-rotate(@i);
+  }
+  .calculateRotations((@i - 1));
+}
+.calculateRotations(359);
+
+// flip icons horizontal/vertical
 .@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); }
 .@{fa-css-prefix}-flip-vertical   { .fa-icon-flip(1, -1, 2); }
 
-// Hook for IE8-9
+// ie 8-9 fix
 // -------------------------
+// todo: check on assigning an array of selectors to the selector instead of using
+//       this loop
 
-:root .@{fa-css-prefix}-rotate-90,
-:root .@{fa-css-prefix}-rotate-180,
-:root .@{fa-css-prefix}-rotate-270,
-:root .@{fa-css-prefix}-flip-horizontal,
-:root .@{fa-css-prefix}-flip-vertical {
-  filter: none;
+:root  {
+  .calculateIEFixes(@i) when (@i >= 0) {
+    @rotation-selector: ~"@{fa-css-prefix}-rotate-@{i}";
+    .@{rotation-selector} when (mod(@i, 90) = 0) {
+      filter: none;
+    }
+    // iterate
+    .calculateIEFixes((@i - 1));
+  }
+  .calculateIEFixes(359);
 }

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

@@ -0,0 +1,39 @@
+---
+---
+
+// icon sizes
+// --------------------------
+
+// scale icon size by n
+.createIconScales(@iterator: 1) when(@iterator <= length(@fa-var-scales)) {
+
+  @fa-icon-scale-name: extract(extract(@fa-var-scales, @iterator), 1);
+  @fa-icon-scale-name-unquoted: ~"@{fa-icon-scale-name}";
+  @fa-icon-scale: extract(extract(@fa-var-scales, @iterator), 2);
+
+  .@{fa-css-prefix}-@{fa-icon-scale-name-unquoted} {
+
+    font-size: floor(@fa-font-size-base * @fa-icon-scale);
+    line-height: floor(@fa-font-size-base * @fa-icon-scale * 0.75);
+    vertical-align: -15%;
+  }
+
+  .createIconScales((@iterator + 1));
+}
+.createIconScales();
+
+// multiply icon size by n
+.createIconMultipliers(@iterator: 1) when(@iterator <= length(@fa-var-multipliers)) {
+
+  @fa-icon-multiplier-name: extract(extract(@fa-var-multipliers, @iterator), 1);
+  @fa-icon-multiplier-name-unquoted: ~"@{fa-icon-multiplier-name}";
+  @fa-icon-multiplier: extract(extract(@fa-var-multipliers, @iterator), 2);
+
+  .@{fa-css-prefix}-@{fa-icon-multiplier-name-unquoted} {
+
+    font-size: floor(@fa-font-size-base * @fa-icon-multiplier);
+  }
+
+  .createIconMultipliers((@iterator + 1));
+}
+.createIconMultipliers();

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

@@ -1,7 +1,7 @@
 ---
 ---
 
-// Stacked Icons
+// stacked icons
 // -------------------------
 
 .@{fa-css-prefix}-stack {

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

@@ -1,6 +1,7 @@
 ---
 ---
-// Variables
+
+// variables
 // --------------------------
 
 @fa-font-path:        "../fonts";
@@ -11,6 +12,25 @@
 @fa-border-color:     #eee;
 @fa-inverse:          #fff;
 @fa-li-width:         (30em / 14);
+@fa-rotation-increment: 45;
 
-{% assign sorted_icons = icons | expand_aliases | sort_by:'class' %}{% for icon in sorted_icons %}@fa-var-{{ icon.class }}: "\{{ icon.unicode }}";
-{% endfor %}
+{% capture glyph_count %}{{ sorted_icons | size }}{% endcapture %}
+
+@fa-var-glyphs:
+  {% assign sorted_icons = icons | expand_aliases | sort_by:'class' %}{% for icon in sorted_icons %}{{ icon.class }} "\{{ icon.unicode }}"{% if forloop.index != glyph_count %},{% endif %}
+  {% endfor %};
+
+// icon sizes - these scale font size and line height
+@fa-var-scales:
+  "default" 1.000,
+  "lg"      1.333,
+  "sm"      0.666,
+  "xlg"     1.666,
+  "xsm"     0.333;
+
+// icon size multipliers - these scale font size
+@fa-var-multipliers:
+  "2x" 2,
+  "3x" 3,
+  "4x" 4,
+  "5x" 5;

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

@@ -1,7 +1,7 @@
 ---
 ---
 
-// Spinning Icons
+// spinning icons
 // --------------------------
 
 .#{$fa-css-prefix}-spin {

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

@@ -1,7 +1,7 @@
 ---
 ---
 
-// Bordered & Pulled
+// bordered and pulled
 // -------------------------
 
 .#{$fa-css-prefix}-border {

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

@@ -1,7 +1,7 @@
 ---
 ---
 
-// Base Class Definition
+// base class definition
 // -------------------------
 
 .#{$fa-css-prefix} {

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

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

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

@@ -0,0 +1,29 @@
+---
+---
+
+// functions
+// --------------------------
+
+// extract the number from a unit
+@function unitless($number) {
+  @return $number / ($number * 0 + 1);
+}
+
+// fudge a number to an accuracy of 0-6 decimal places
+@function fudge($number, $places: 0) {
+  $fraction: 10;
+  $number: unitless($number);
+  $return: null;
+
+  @if $places == 0 {
+    @return round($number);
+  } @else {
+    @if $places > 6 {
+      $places: 6;
+    }
+    @for $i from 1 through $places {
+      $fraction: $fraction * 10;
+    }
+    @return round($number * $fraction) / $fraction;
+  }
+}

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

@@ -1,7 +1,11 @@
 ---
 ---
+
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
-{% for icon in icons %}{% for alias in icon.aliases %}
-.#{$fa-css-prefix}-{{ alias }}:before,{% endfor %}
-.#{$fa-css-prefix}-{{ icon.id }}:before { content: $fa-var-{{ icon.id }}; }{% endfor %}
+
+@each $fa-glyph-name, $fa-glyph-content in $fa-var-glyphs {
+  .#{$fa-css-prefix}-#{$fa-glyph-name}:before {
+    content: $fa-glyph-content;
+  }
+}

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

@@ -1,7 +1,7 @@
 ---
 ---
 
-// List Icons
+// list icons
 // -------------------------
 
 .#{$fa-css-prefix}-ul {
@@ -10,6 +10,7 @@
   list-style-type: none;
   > li { position: relative; }
 }
+
 .#{$fa-css-prefix}-li {
   position: absolute;
   left: -$fa-li-width;

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

@@ -1,17 +1,22 @@
 ---
 ---
-// Mixins
+
+// mixins
 // --------------------------
 
 @mixin fa-icon() {
 {% include code/core.scss %}
 }
 
-@mixin fa-icon-rotate($degrees, $rotation) {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
-  -webkit-transform: rotate($degrees);
-      -ms-transform: rotate($degrees);
-          transform: rotate($degrees);
+@mixin fa-icon-rotate($degrees) {
+  // check if this ie fix is necessary
+  @if $degrees % 90 == 0 {
+    $rotation: $degrees / 90;
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
+  }
+  -webkit-transform: rotate(#{$degrees}deg);
+      -ms-transform: rotate(#{$degrees}deg);
+          transform: rotate(#{$degrees}deg);
 }
 
 @mixin fa-icon-flip($horiz, $vert, $rotation) {

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

@@ -1,8 +1,13 @@
-/* FONT PATH
- * -------------------------- */
+---
+---
+
+// font path
+// --------------------------
 
 @font-face {
   font-family: 'FontAwesome';
+  font-style: normal;
+  font-weight: normal;
   src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
   src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
     url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
@@ -10,6 +15,4 @@
     url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
     url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
 //  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
-  font-weight: normal;
-  font-style: normal;
 }

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

@@ -1,23 +1,43 @@
 ---
 ---
 
-// Rotated & Flipped Icons
+// rotated and 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); }
+$rotations-requiring-ie-fix: (
+  "flip-horizontal",
+  "flip-vertical"
+);
+$rotation-selector: '';
 
+// calculate classes and values for rotation
+@for $i from 0 through 359 {
+  @if $i == 0 or $i % $fa-rotation-increment == 0 {
+    $rotation-selector: #{$fa-css-prefix}-rotate-#{$i};
+
+    .#{$rotation-selector} {
+      @include fa-icon-rotate($i);
+    }
+    // check if this item needs some ie love
+    @if $i == 0 or $i % 90 == 0 {
+      $rotations-requiring-ie-fix: append($rotations-requiring-ie-fix, #{$rotation-selector});
+    }
+  }
+}
+
+// flip icons horizontal/vertical
 .#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
 .#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }
 
-// Hook for IE8-9
+// ie 8-9 fix
 // -------------------------
+// todo: check on assigning an array of selectors to the selector instead of using
+//       this loop
 
-:root .#{$fa-css-prefix}-rotate-90,
-:root .#{$fa-css-prefix}-rotate-180,
-:root .#{$fa-css-prefix}-rotate-270,
-:root .#{$fa-css-prefix}-flip-horizontal,
-:root .#{$fa-css-prefix}-flip-vertical {
-  filter: none;
+:root  {
+  @each $fix in $rotations-requiring-ie-fix {
+    .#{$fix} {
+      filter: none;
+    }
+  }
 }

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

@@ -0,0 +1,21 @@
+---
+---
+
+// icon sizes
+// -------------------------
+
+// scale icon size by n
+@each $fa-icon-scale-name, $fa-icon-scale in $fa-var-scales {
+  .#{$fa-css-prefix}-#{$fa-icon-scale-name} {
+    font-size: #{fudge(unitless($fa-font-size-base) * $fa-icon-scale)}px;
+    line-height: #{fudge(unitless($fa-font-size-base) * $fa-icon-scale * 0.75)}px;
+    vertical-align: -15%;
+  }
+}
+
+// multiply icon size by n
+@each $fa-icon-multiplier-name, $fa-icon-multiplier in $fa-var-multipliers {
+  .#{$fa-css-prefix}-#{$fa-icon-multiplier-name} {
+    font-size: #{fudge($fa-font-size-base * $fa-icon-multiplier)}px;
+  }
+}

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

@@ -1,7 +1,7 @@
 ---
 ---
 
-// Stacked Icons
+// stacked icons
 // -------------------------
 
 .#{$fa-css-prefix}-stack {

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

@@ -1,16 +1,38 @@
 ---
 ---
-// Variables
+
+// variables
 // --------------------------
 
-$fa-font-path:        "../fonts" !default;
-$fa-font-size-base:   14px !default;
+$fa-font-path:          "../fonts" !default;
+$fa-font-size-base:     14px !default;
 //$fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/{{site.fontawesome.version}}/fonts" !default; // for referencing Bootstrap CDN font files directly
-$fa-css-prefix:       {{ site.fontawesome.css_prefix }} !default;
-$fa-version:          "{{ site.fontawesome.version }}" !default;
-$fa-border-color:     #eee !default;
-$fa-inverse:          #fff !default;
-$fa-li-width:         (30em / 14) !default;
+$fa-css-prefix:         {{ site.fontawesome.css_prefix }} !default;
+$fa-version:            "{{ site.fontawesome.version }}" !default;
+$fa-border-color:       #eee !default;
+$fa-inverse:            #fff !default;
+$fa-li-width:           (30em / 14) !default;
+$fa-rotation-increment: 45 !default;
 
-{% assign sorted_icons = icons | expand_aliases | sort_by:'class' %}{% for icon in sorted_icons %}$fa-var-{{ icon.class }}: "\{{ icon.unicode }}";
-{% endfor %}
+{% capture glyph_count %}{{ sorted_icons | size }}{% endcapture %}
+
+$fa-var-glyphs: (
+  {% assign sorted_icons = icons | expand_aliases | sort_by:'class' %}{% for icon in sorted_icons %}"{{ icon.class }}": "\{{ icon.unicode }}"{% if forloop.index != glyph_count %},{% endif %}
+  {% endfor %}
+);
+// icon sizes - these scale font size and line height
+$fa-var-scales: (
+  "default": 1.000,
+  "lg":      1.333,
+  "sm":      0.666,
+  "xlg":     1.666,
+  "xsm":     0.333
+) !default;
+
+// icon size multipliers - these scale font size
+$fa-var-multipliers: (
+  "2x": 2,
+  "3x": 3,
+  "4x": 4,
+  "5x": 5
+) !default;

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

@@ -1,12 +1,14 @@
 ---
 ---
+
 {% include code/license.css %}
 
 @import "variables";
+@import "functions";
 @import "mixins";
 @import "path";
 @import "core";
-@import "larger";
+@import "sizes";
 @import "fixed-width";
 @import "list";
 @import "bordered-pulled";