Using FontAwesome with Sass

That work for me:

1. Run the command:

   npm install font-awesome --save-dev
   

2. Add these lines to index.scss:

   $fa-font-path: "~font-awesome/fonts";
   @import "~font-awesome/scss/font-awesome";
   

Ok, I got help with that and there were several issues with the paths that were the main problem. I'll explain them here in case it helps someone in my position.

The problem was: indeed, the font files were not loading

The errors: mostly related to paths and how compass & sass behave with @import

The corrections to my steps above:

1) You can't do wrong on that one...

2) First, don't put the whole folder in the css directory. Each type of file should go in its directory, so the .scss files under the sass directory, the font files (.ttf, .woff, etc) under css/fonts directory.

That's important in Sass because of the way @import works. In the Sass Reference says

Sass looks for other Sass files in the current directory, and the Sass file directory under Rack, Rails, or Merb. Additional search directories may be specified using the :load_paths option, or the --load-path option on the command line.

I overlooked that and place my .scss files in other directory and that's why with a normal @import they couldn't be found. Which leads us to the next point.

3) It was silly to try to import a .scss file as an url(), I tried to do so because a regular @import was not working. Once the font-awesome.scss file was in my sass directory, I could now @import "font-awesome/font-awesome.scss"

4) Same here, @import paths are relative to the .scss files and as long as font-awesome.scss and its partials are in the same folder, no need to touch these.

5) That was right, you need to change the @FontAwesomePath to match your fonts directory

6) Sure you need an HTML example for testing, so ok here

7) That was unnecessary, it's already in the font-awesome.scss I'm importing. DRY.

8) Same as above, unnecessary too.

9 & 10) Yeah girl, good job

So, what to learn from this: check your paths twice taking into account how @import in Sass only looks (by default) at your current sass directory.

This method is working, but you have to download the entire fontawesome folder each time you setup a new project and link all the files. By installing SASS Ruby Gem you can avoid extra work.

Open Terminal and do:
gem install font-awesome-sass
Remember that you should have administrator rights on your computer.
If you are an administrator and getting this:

ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.

Try to install as super user:
sudo gem install font-awesome-sass
You’ll need to enter your password.

You should get this if installation was successful:

Successfully installed font-awesome-sass-4.1.0
Parsing documentation for font-awesome-sass-4.1.0
1 gem installed

Next open your sass file and import font-awesome library:
@import "/Library/Ruby/Gems/2.0.0/gems/font-awesome-sass-4.1.0/vendor/assets/stylesheets/font-awesome";
I am a mac user and in my case the gem is installed into this location. You should figure out where it stores on your windows machine.
It’s important to use absolute path. It won’t work if you do:
@import "font-awesome”Because you installed ruby gem, it is not part of compass (as I mistakenly thought in the beginning).

Download fontAwesome from fontawesome.io and unzip it. Copy font-awesome fonts into your css folder under fonts directory. Like here:
Screen Shot 2014-08-28 at 2.14.07 PM

In your .sass add a font-face FontAwesome somewhere on top of the file:

@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
src: url("fonts/fontawesome-webfont.eot") format("embedded-opentype"),
url("fonts/fontawesome-webfont.woff") format("woff"),
url("fonts/fontawesome-webfont.ttf") format("truetype"),
url("fonts/fontawesome-webfont.svg") format("svg");
font-weight: normal;
font-style: normal;
}

All set
Now you can use fontAwesome in your project!
Use FontAwesome inline with <i></i> tag or you can use it via @extend method in your SASS.
Inline method example:

Insert an <i></i> tag where you need it and add classes .fa (default for all icons) and .fa-[icon-name]
<i style="margin:12px;" class="fa fa-camera-retro"></i>

More details about this method you’ll find here
fontawesome website

SASS @extend method example:

$your_selector {
  @extend .fa;
  @extend .fa-camera-retro;
  font-family: $verdana;
  &::before {
    font-family: "FontAwesome";
  }
}

Using the last version of the Free version, you have to use :

yarn add @fortawesome/fontawesome-free

Then, in your app.scss (if you use Sass), you have to add these lines :

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';

Notice : you don't have to import every type of icons.