Using FontAwesome with Sass

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.

Leave a Comment