Updated: Font awesome library upgraded to version 4.7 for both front-office and back-office

admin/themes/default/sass/admin-theme.sass

@@ -1,8 +1,5 @@
 // Make sure the charset is set appropriately
 @charset "UTF-8"
-//Compass is required to pre-compile this stylesheets to .css
-@import "compass"
-
 @import "modules/colors"
 @import "modules/variables"
 @import "modules/mixins"

admin/themes/default/sass/modules/_mixins.sass

@@ -14,3 +14,41 @@
     i
         font-size: $size/3*2
         line-height: $size
+
+// Vendor-prefix helper (replaces Compass experimental mixin)
+@mixin experimental($property, $value)
+    -webkit-#{$property}: $value
+    -moz-#{$property}: $value
+    -ms-#{$property}: $value
+    #{$property}: $value
+
+// Returns $dark or $light based on $color luminance (replaces Compass contrast-color)
+@function contrast-color($color, $dark, $light)
+    @if lightness($color) > 50%
+        @return $dark
+    @else
+        @return $light
+
+// Opacity with IE filter fallback
+@mixin opacity($value)
+    opacity: $value
+    filter: alpha(opacity=#{$value * 100})
+
+// Text shadow
+@mixin text-shadow($values...)
+    text-shadow: $values
+
+// Transform with vendor prefixes
+@mixin transform($values...)
+    -webkit-transform: $values
+    -ms-transform: $values
+    transform: $values
+
+// Transform style with vendor prefix
+@mixin transform-style($value: preserve-3d)
+    -webkit-transform-style: $value
+    transform-style: $value
+
+// Background image wrapper
+@mixin background-image($values...)
+    background-image: $values

admin/themes/default/sass/vendor/font-awesome/_bordered-pulled.scss

@@ -7,6 +7,15 @@
   border-radius: .1em;
 }
 
+.#{$fa-css-prefix}-pull-left { float: left; }
+.#{$fa-css-prefix}-pull-right { float: right; }
+
+.#{$fa-css-prefix} {
+  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
+}
+
+/* Deprecated as of 4.4.0 */
 .pull-right { float: right; }
 .pull-left { float: left; }
 

admin/themes/default/sass/vendor/font-awesome/_core.scss

@@ -3,11 +3,10 @@
 
 .#{$fa-css-prefix} {
   display: inline-block;
-  font: normal normal normal #{$fa-font-size-base}/1 FontAwesome; // shortening font declaration
+  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
   font-size: inherit; // can't have font-size inherit on line above, so need to override
   text-rendering: auto; // optimizelegibility throws things off #1094
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  transform: translate(0, 0); // ensures no half-pixel rendering in firefox
 
 }

admin/themes/default/sass/vendor/font-awesome/_mixins.scss

@@ -3,25 +3,58 @@
 
 @mixin fa-icon() {
   display: inline-block;
-  font: normal normal normal #{$fa-font-size-base}/1 FontAwesome; // shortening font declaration
+  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
   font-size: inherit; // can't have font-size inherit on line above, so need to override
   text-rendering: auto; // optimizelegibility throws things off #1094
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  transform: translate(0, 0); // ensures no half-pixel rendering in firefox
 
 }
 
 @mixin fa-icon-rotate($degrees, $rotation) {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
   -webkit-transform: rotate($degrees);
       -ms-transform: rotate($degrees);
           transform: rotate($degrees);
 }
 
 @mixin fa-icon-flip($horiz, $vert, $rotation) {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
   -webkit-transform: scale($horiz, $vert);
       -ms-transform: scale($horiz, $vert);
           transform: scale($horiz, $vert);
 }
+
+
+// Only display content to screen readers. A la Bootstrap 4.
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+@mixin sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+@mixin sr-only-focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}

admin/themes/default/sass/vendor/font-awesome/_screen-reader.scss

@@ -0,0 +1,5 @@
+// Screen Readers
+// -------------------------
+
+.sr-only { @include sr-only(); }
+.sr-only-focusable { @include sr-only-focusable(); }