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.