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

Download the font-awesome directory
Copy it to my projects css folder, where I have all my compiled css: project/css/font-awesome
Import the font-awesome.scss file in my main sass stylesheet like this @import url("font-awesome/scss/font-awesome.scss");
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");
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
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

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

Extend the font in the selector

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

Compile my main sass stylesheet using compass --watch with no errors
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?

score 43 · Accepted Answer · answered Sep 02 '13 at 13:35

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.

Thanks for the solution. Your last sentence is really important. — Orkun Tuzel, Jan 15 '14 at 13:50
May I just add, that you need to keep an eye on your prefix. So in your example it has a class of "icon-camera-retro", I in fact had to use "fa fa-camera-retro". Hope this helps anyone who is stuck at the last point! — AndyD, Mar 16 '14 at 21:22
node sass uses includePaths, see this https://github.com/sass/node-sass#includepaths — Mouloud, Oct 23 '16 at 11:53
For anyone looking for the guidance from Font Awesome go to - https://fontawesome.com/how-to-use/web-fonts-with-css#less-and-sass — Chase Oliphant, Apr 05 '18 at 19:52

score 41 · Answer 2 · edited Oct 24 '17 at 13:17

41

That work for me:

Run the command:
```
npm install font-awesome --save-dev
```

Add these lines to index.scss:

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

edited Oct 24 '17 at 13:17

Stephen Rauch

47,830
31
106
135

answered Oct 24 '17 at 12:38

uri gat

511
4
6

1

It seems this npm package is an unofficial and outdated one. – Vapid Sep 10 '20 at 07:15

score 10 · Answer 3 · answered Feb 24 '20 at 13:13

10

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.

answered Feb 24 '20 at 13:13

Vincent Decaux

9,857
6
56
84

This blog gives more details: https://blog.logrocket.com/full-guide-to-using-font-awesome-icons-in-vue-js-apps-5574c74d9b2d/ – Mahesh Mar 26 '20 at 21:47

score 4 · Answer 4 · edited Feb 23 '17 at 15:56

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

Please include relevant details from links in the answer itself. Links die unfortunately and then the answer would become useless. — EWit, Sep 07 '14 at 01:59

abe312 · Answer 5 · 2018-03-07T16:36:55.943

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

score 1 · Answer 6 · answered Nov 02 '15 at 07:47

Steps to Install custom font-awesome sass.

Download the font-awesome folder and extract it.
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.
Move the fonts folder that is inside font-awesome folder to your projects folder >> Project/fonts
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}

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

Now, you are all set

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

I am using v5.12.1 of font awesome the fonts folder is now called webfonts And this is how I thought it would be, but it did not work for me. Even to the point that I tried to re-compile the standard fontawesome, and got the same result a blank content. fa-phone:before{content:""} — TheArchitecta, Feb 21 '20 at 05:34

Using FontAwesome with Sass

The output

The steps I've done

6 Answers6

Linked

Related