font-awesome-sass 5.15.1 → 6.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cacaa1219aaab42112307e8a47641b7ebba8861d1c2ac00e93beefccd15a3b94
-  data.tar.gz: 3d848d1e5e78ea46eed168865cd82af8db729dce652dc178a7de75da444e4a38
+  metadata.gz: d6ee9d3c87656a6e2c112936c1cd09c8de660b56dfb2928ca5163ec6431d7fc6
+  data.tar.gz: 2892c87a286914a5b7d3feb9dd88db15f88952aaabe27996807bdf3ed9452252
 SHA512:
-  metadata.gz: 803c5abda6e911d06888a1d1271ab47b07264d26fd74cbe87a474810db83d9365eaf65bca34dedae86df3e2c8711843b6b90cd1f98586399d01c3e4f4f18f68a
-  data.tar.gz: 15ce0e427b37547a0b1a3a50bdf0c23c43de4b2ea3bd10a9f5d28ba4a8335f02e46b437f57a4e1c4b3f3885647ee48b9ea78f5c14e0dadd2445c209777967a5c
+  metadata.gz: 1e8b7baba671ae6272476cea723a9267dbb8121ccee64d2d85f1e8c742856d3815dab9e24592962b0c8f25eb42efb992b8718fce08cce4fd9766911eb8bf6337
+  data.tar.gz: ead5f3a70ab169bb1afb4d64a9d990e7b727e79d81b0eae93fbdb83510f25d268b4a1bf610b82555f72650d52372f81d2fa81a93f28f3e281a2a55c7243340a4

data/README.md

@@ -2,35 +2,20 @@
 
 [![Gem Version](https://badge.fury.io/rb/font-awesome-sass.svg)](https://badge.fury.io/rb/font-awesome-sass)
 
-'font-awesome-sass' is a Sass-powered version of [FontAwesome](http://fortawesome.github.io/Font-Awesome/) for your Ruby projects and plays nicely with
- Ruby on Rails, Compass, Sprockets, etc.
+'font-awesome-sass' is a Sass-powered version of [Font Awesome](http://fontawesome.com/) for your Ruby projects with specific support for Ruby on Rails and Sprockets.
 
- Refactored to support more Ruby environments with code and documentation humbly used from the excellent
- [bootstrap-sass](https://github.com/twbs/bootstrap-sass) project by the Bootstrap team
+Refactored to support more Ruby environments with code and documentation humbly used from the excellent [bootstrap-sass](https://github.com/twbs/bootstrap-sass) project by the Bootstrap team
 
-## Breaking Changes
-
-With the update to Font Awesome 5.x there are some breaking changes that will effect your use of this gem. Some of the changes include:
-
-  * Icon name changes
-  * New icons
-  * The use of an icon style (`solid`, `regular`, or `brands`)
-
-You can find more detailed information on these changes on our [Getting Started](https://fontawesome.com/get-started/web-fonts-with-css) guide, our [How to Use](https://fontawesome.com/how-to-use/web-fonts-with-css) guide, and our [Upgrading from Version 4](https://fontawesome.com/how-to-use/upgrading-from-4) guide.
+You can find more detailed information on these changes on our [Getting Started](https://fontawesome.com/docs/web/setup/get-started) guide, our [How to Use](https://fontawesome.com/docs/web/) guide, and our [Upgrade](https://fontawesome.com/docs/web/setup/upgrade/) guide.
 
 ## Installation
 
-Please see the appropriate guide for your environment of choice:
-
-* [Ruby on Rails](#a-ruby-on-rails).
-* [Compass](#b-compass-without-rails) not on Rails.
-
-### a. Ruby on Rails
+### Ruby on Rails
 
 In your Gemfile include:
 
 ```ruby
-gem 'font-awesome-sass', '~> 5.15.1'
+gem 'font-awesome-sass', '~> 6.1.0'
 ```
 
 And then execute:
@@ -39,11 +24,9 @@ And then execute:
 bundle install
 ```
 
-Import the FontAwesome styles in your `app/assets/stylesheets/application.css.scss`. The `font-awesome-sprockets` file
-includes the sprockets assets helper Sass functions used for finding the proper path to the font file.
+Import the FontAwesome styles in your `app/assets/stylesheets/application.css.scss`. The `font-awesome` file includes all the tools needed to get Font Awesome up and running for Rails.
 
 ```scss
-@import "font-awesome-sprockets";
 @import "font-awesome";
 ```
 
@@ -51,65 +34,38 @@ If `app/assets/stylesheets/application.css.scss` does not exist then rename `app
 
 #### Rails Helper usage
 
-With Font Awesome 5.x you now need to select what style of icon you want to use. Font Awesome 5.x has 3 styles:
+With Font Awesome Free 6.x you now need to select what style of icon you want to use. Font Awesome Free 6.x has 3 styles:
 
-  * solid (`fas`)
-  * regular (`far`)
-  * brands (`fab`)
+  * solid (`fa-solid` or `fas`)
+  * regular (`fa-regular` or `far`)
+  * brands (`fa-brands` or `fab`)
 
 In your view:
 
 ```ruby
+icon('fa-solid', 'flag')
+# => <i class="fa-solid fa-flag" aria-hidden="true"></i>
 icon('fas', 'flag')
-# => <i class="fas fa-flag"></i>
+# => <i class="fas fa-flag" aria-hidden="true"></i>
+
 ```
 
 ```ruby
+icon('fa-regular', 'address-book', class: 'strong')
+# => <i class="fa-regular fa-address-book strong" aria-hidden="true"></i>
 icon('far', 'address-book', class: 'strong')
-# => <i class="far fa-address-book strong"></i>
+# => <i class="far fa-address-book strong" aria-hidden="true"></i>
 ```
 
 ```ruby
+icon('fa-brands', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'strong')
+# => <i id="my-icon" class="fa-brands fa-font-awesome strong" aria-hidden="true"></i> Font Awesome
 icon('fab', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'strong')
-# => <i id="my-icon" class="fab fa-font-awesome strong"></i> Font Awesome
+# => <i id="my-icon" class="fab fa-font-awesome strong" aria-hidden="true"></i> Font Awesome
 ```
 
 Note: the icon helper can take a hash of options that will be passed to the content_tag helper
 
-### b. Compass without Rails
-
-Install the gem
-
-```sh
-gem install font-awesome-sass
-```
-
-If you have an existing Compass project:
-
-```ruby
-# config.rb:
-require 'font-awesome-sass'
-```
-
-Import the FontAwesome styles
-
-```scss
-@import "font-awesome-compass";
-@import "font-awesome";
-```
-
-## Upgrading from FontAwesome::Sass 4.x
+### Other Ruby Projects
 
-Prepend the style of the icon you want to use (`fas`, `far`, `fab`) class to existing icons:
-
-4.x Syntax
-
-```html
-<i class="fa fa-github"></i>
-```
-
-5.x Syntax (GitHub icon exists in the Brands style)
-
-```html
-<i class="fab fa-github"></i>
-```
+The `path.scss` file contains a function for using the `font-path` function if found. If the function is not found it will use the `$fa-font-path` variable for the path to the webfont files. You can override this variable to where your framework will store the webfonts files.

data/assets/stylesheets/_font-awesome.scss

@@ -1,12 +1,16 @@
 /*!
- * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 6.1.0 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
  */
+// Font Awesome core compile (Web Fonts-based)
+// -------------------------
+
+@import "font-awesome/functions";
 @import "font-awesome/variables";
 @import "font-awesome/mixins";
-@import "font-awesome/path";
 @import "font-awesome/core";
-@import "font-awesome/larger";
+@import "font-awesome/sizing";
 @import "font-awesome/fixed-width";
 @import "font-awesome/list";
 @import "font-awesome/bordered-pulled";
@@ -14,4 +18,7 @@
 @import "font-awesome/rotated-flipped";
 @import "font-awesome/stacked";
 @import "font-awesome/icons";
-@import "font-awesome/screen-reader";
+@import "font-awesome/screen-reader";
+@import "font-awesome/solid";
+@import "font-awesome/regular";
+@import "font-awesome/brands";

data/assets/stylesheets/font-awesome/_animated.scss

@@ -1,19 +1,215 @@
-// Animated Icons
+// animating icons
 // --------------------------
 
+.#{$fa-css-prefix}-beat {
+  animation-name: #{$fa-css-prefix}-beat;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
+}
+
+.#{$fa-css-prefix}-bounce {
+  animation-name: #{$fa-css-prefix}-bounce;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
+}
+
+.#{$fa-css-prefix}-fade {
+  animation-name: #{$fa-css-prefix}-fade;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
+}
+
+.#{$fa-css-prefix}-beat-fade {
+  animation-name: #{$fa-css-prefix}-beat-fade;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
+}
+
+.#{$fa-css-prefix}-flip {
+  animation-name: #{$fa-css-prefix}-flip;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
+}
+
+.#{$fa-css-prefix}-shake {
+  animation-name: #{$fa-css-prefix}-shake;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
+}
+
 .#{$fa-css-prefix}-spin {
-  animation: fa-spin 2s infinite linear;
+  animation-name: #{$fa-css-prefix}-spin;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
+}
+
+.#{$fa-css-prefix}-spin-reverse {
+  --#{$fa-css-prefix}-animation-direction: reverse;
+}
+
+.#{$fa-css-prefix}-pulse,
+.#{$fa-css-prefix}-spin-pulse {
+  animation-name: #{$fa-css-prefix}-spin;
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, steps(8));
+}
+
+// if agent or operating system prefers reduced motion, disable animations
+// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
+// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
+@media (prefers-reduced-motion: reduce) {
+  .#{$fa-css-prefix}-beat,
+  .#{$fa-css-prefix}-bounce,
+  .#{$fa-css-prefix}-fade,
+  .#{$fa-css-prefix}-beat-fade,
+  .#{$fa-css-prefix}-flip,
+  .#{$fa-css-prefix}-pulse,
+  .#{$fa-css-prefix}-shake,
+  .#{$fa-css-prefix}-spin,
+  .#{$fa-css-prefix}-spin-pulse {
+    animation-delay: -1ms;
+    animation-duration: 1ms;
+    animation-iteration-count: 1;
+    transition-delay: 0s;
+    transition-duration: 0s;
+  }
+}
+
+@keyframes #{$fa-css-prefix}-beat {
+  0%,
+  90% {
+    transform: scale(1);
+  }
+  45% {
+    transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25));
+  }
+}
+
+@keyframes #{$fa-css-prefix}-bounce {
+  0% {
+    transform: scale(1, 1) translateY(0);
+  }
+  10% {
+    transform: scale(
+        var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),
+        var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)
+      )
+      translateY(0);
+  }
+  30% {
+    transform: scale(
+        var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),
+        var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)
+      )
+      translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em));
+  }
+  50% {
+    transform: scale(
+        var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),
+        var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)
+      )
+      translateY(0);
+  }
+  57% {
+    transform: scale(1, 1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em));
+  }
+  64% {
+    transform: scale(1, 1) translateY(0);
+  }
+  100% {
+    transform: scale(1, 1) translateY(0);
+  }
+}
+
+@keyframes #{$fa-css-prefix}-fade {
+  50% {
+    opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4);
+  }
+}
+
+@keyframes #{$fa-css-prefix}-beat-fade {
+  0%,
+  100% {
+    opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125));
+  }
 }
 
-.#{$fa-css-prefix}-pulse {
-  animation: fa-spin 1s infinite steps(8);
+@keyframes #{$fa-css-prefix}-flip {
+  50% {
+    transform: rotate3d(
+      var(--#{$fa-css-prefix}-flip-x, 0),
+      var(--#{$fa-css-prefix}-flip-y, 1),
+      var(--#{$fa-css-prefix}-flip-z, 0),
+      var(--#{$fa-css-prefix}-flip-angle, -180deg)
+    );
+  }
 }
 
-@keyframes fa-spin {
+@keyframes #{$fa-css-prefix}-shake {
   0% {
+    transform: rotate(-15deg);
+  }
+  4% {
+    transform: rotate(15deg);
+  }
+  8%,
+  24% {
+    transform: rotate(-18deg);
+  }
+  12%,
+  28% {
+    transform: rotate(18deg);
+  }
+  16% {
+    transform: rotate(-22deg);
+  }
+  20% {
+    transform: rotate(22deg);
+  }
+  32% {
+    transform: rotate(-12deg);
+  }
+  36% {
+    transform: rotate(12deg);
+  }
+  40%,
+  100% {
     transform: rotate(0deg);
   }
+}
 
+@keyframes #{$fa-css-prefix}-spin {
+  0% {
+    transform: rotate(0deg);
+  }
   100% {
     transform: rotate(360deg);
   }

data/assets/stylesheets/font-awesome/_bordered-pulled.scss

@@ -1,20 +1,20 @@
-// Bordered & Pulled
+// bordered + pulled icons
 // -------------------------
 
 .#{$fa-css-prefix}-border {
-  border: solid .08em $fa-border-color;
-  border-radius: .1em;
-  padding: .2em .25em .15em;
+  border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
+  border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
+  border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
+  border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
+  padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
 }
 
-.#{$fa-css-prefix}-pull-left { float: left; }
-.#{$fa-css-prefix}-pull-right { float: right; }
+.#{$fa-css-prefix}-pull-left {
+  float: left;
+  margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
+}
 
-.#{$fa-css-prefix},
-.fas,
-.far,
-.fal,
-.fab {
-  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
-  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
+.#{$fa-css-prefix}-pull-right {
+  float: right;
+  margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
 }

data/assets/stylesheets/font-awesome/_brands.scss

@@ -0,0 +1,33 @@
+/*!
+ * Font Awesome Free 6.1.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@import "functions";
+@import "variables";
+
+:root,
+:host {
+  --#{$fa-css-prefix}-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
+}
+
+@font-face {
+  font-family: "Font Awesome 6 Brands";
+  font-style: normal;
+  font-weight: 400;
+  font-display: $fa-font-display;
+  src: url(fa-font-path("fa-brands-400.woff2")) format("woff2"),
+    url(fa-font-path("fa-brands-400.ttf")) format("truetype");
+}
+
+.fab,
+.#{$fa-css-prefix}-brands {
+  font-family: "Font Awesome 6 Brands";
+  font-weight: 400;
+}
+
+@each $name, $icon in $fa-brand-icons {
+  .#{$fa-css-prefix}-#{$name}:before {
+    content: unquote('"#{ $icon }"');
+  }
+}

data/assets/stylesheets/font-awesome/_core.scss

@@ -1,19 +1,31 @@
-// Base Class Definition
+// base icon class definition
 // -------------------------
 
+.#{$fa-css-prefix} {
+  font-family: var(--#{$fa-css-prefix}-style-family, "#{$fa-style-family}");
+  font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
+}
+
 .#{$fa-css-prefix},
 .fas,
+.#{$fa-css-prefix}-solid,
 .far,
+.#{$fa-css-prefix}-regular,
 .fal,
+.#{$fa-css-prefix}-light,
+.fat,
+.#{$fa-css-prefix}-thin,
 .fad,
-.fab {
+.#{$fa-css-prefix}-duotone,
+.fab,
+.#{$fa-css-prefix}-brands {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  display: inline-block;
+  display: var(--#{$fa-css-prefix}-display, #{$fa-display});
   font-style: normal;
   font-variant: normal;
-  text-rendering: auto;
   line-height: 1;
+  text-rendering: auto;
 }
 
 %fa-icon {

data/assets/stylesheets/font-awesome/_fixed-width.scss

@@ -1,5 +1,6 @@
-// Fixed Width Icons
+// fixed-width icons
 // -------------------------
+
 .#{$fa-css-prefix}-fw {
   text-align: center;
   width: $fa-fw-width;

data/assets/stylesheets/font-awesome/_functions.scss

@@ -0,0 +1,66 @@
+// functions
+// --------------------------
+
+// fa-content: convenience function used to set content property
+@function fa-content($fa-var) {
+  @return unquote('"#{ $fa-var }"');
+}
+
+// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
+//
+// Licensed under: The MIT License (MIT)
+//
+// Copyright (c) 2011-2021 Twitter, Inc.
+// Copyright (c) 2011-2021 The Bootstrap Authors
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+@function fa-divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+  $quotient: 0;
+  $remainder: $dividend;
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+  @if $divisor == 1 {
+    @return $dividend;
+  }
+  @while $remainder >= $divisor {
+    $quotient: $quotient + 1;
+    $remainder: $remainder - $divisor;
+  }
+  @if $remainder > 0 and $precision > 0 {
+    $remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * 0.1;
+  }
+  @return ($quotient + $remainder) * $sign;
+}
+
+// fa-font-path: function used to set font path to webfont files
+@function fa-font-path($file) {
+  @if function-exists("font-path") {
+    @return font-path("font-awesome/#{$file}");
+  } @else {
+    @return "#{$fa-font-path}/#{$file}";
+  }
+}