Using FontAwesome with Sass

Question

I'm trying to use FontAwesome in a web Compass project. As there's no specific documentation in the FontAwesome page, and I'm not using Bootstrap, I've followed the "Not using Bootstrap?" directions but can't make it work.

The output

I get no specific errors, either not found or compiling errors. It's just not showing anything, no icon or text. The FontAwesome font files doesn't seem to be loading.

The steps I've done

1. Download the font-awesome directory
2. Copy it to my projects css folder, where I have all my compiled css: project/css/font-awesome
3. Import the font-awesome.scss file in my main sass stylesheet like this @import url("font-awesome/scss/font-awesome.scss");
4. Open the font-awesome.scss file and change the import paths so are now relative to my css compiled file and look like this @import url("font-awesome/scss/_variables.scss");
5. Open the _variables.scss partial inside the font-awesome/scss directory and change the @FontAwesomePath from the one by default to "font-awesome/font/", to match where the webfonts are
6. In my html file, added an example following one in the FontAwesome examples page, so I added a <i class="icon-camera-retro"></i> Some text

7. In my main sass file, added the @font-face declaration

   @include font-face('FontAwesome',
   font-files(
   'font-awesome/font/fontawesome-webfont.woff', woff,
   'font-awesome/font/fontawesome-webfont.ttf', ttf,
   'font-awesome/font/fontawesome-webfont.svg', svg),
   'font-awesome/font/fontawesome-webfont.eot');
   
    %icon-font {
        font-family: 'FontAwesome', Helvetica, Arial, sans-serif;
     }
   

8. Extend the font in the selector

   .icon-camera-retro {
       @extend %icon-font;
    }
   

9. Compile my main sass stylesheet using compass --watch with no errors

10. Uploaded everything

To help clarify, this is the structure of my project:

root
    sass
        mainsass.scss
    css
        font-awesome
            css
                font-awesome.css
            font
                font-archives.ttf/.woff/etc
            scss
                _partials (_variables.scss, _path.scss, _core.scss, etc)
                font-awesome.scss
        fonts
            some-custom-font.ttf
        mainsass.css

So if anyone has read up to here, which I already appreciate, any ideas please?

Answer 1

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.

Answer 2

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";
   

Answer 3

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.

Answer 4

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

Answer 5

get font-awesome by

yarn add font-awesome or

bower install font-awesome (not recommended)

now go to the font-awesome directory and copy the fonts folder and paste it one folder up the css folder or scss folder. Eg:

./ ./bower_components/* ./node_modules/* ./styles/main.scss ./fonts ./index.html

Done!

Another method if you don't want to copy the fonts folder is to add the following lines in your main.scss file:

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

Answer 6

Steps to Install custom font-awesome sass.

1. Download the font-awesome folder and extract it.

2. Open the extracted folder >> font-awesome/scss, there you will find the font-awesome.scss and font-awesome partial files. move all these files to your project's scss folder.

3. Move the fonts folder that is inside font-awesome folder to your projects folder >> Project/fonts

4. open the _varaible.scss and change the path as

$fa-font-path: "../fonts" !default; {Your relative path for the fonts in this case it is ../../fonts}

4. Link the font-awesome.css to your header file.

Now, you are all set

https://fortawesome.github.io/Font-Awesome/get-started/