Using FontAwesome with Sass -

i'm trying use fontawesome in web compass project. there's no specific documentation in fontawesome page, , i'm not using bootstrap, i've followed "not using bootstrap?" directions can't make work.

the output

i no specific errors, either not found or compiling errors. it's not showing anything, no icon or text. fontawesome font files doesn't seem loading.

the steps i've done

1. download font-awesome directory
2. copy projects css folder, have compiled css: project/css/font-awesome
3. import font-awesome.scss file in main sass stylesheet @import url("font-awesome/scss/font-awesome.scss");
4. open font-awesome.scss file , change import paths relative css compiled file , @import url("font-awesome/scss/_variables.scss");
5. open _variables.scss partial inside font-awesome/scss directory , change @fontawesomepath 1 default "font-awesome/font/", match webfonts are
6. in html file, added example following 1 in fontawesome examples page, added <i class="icon-camera-retro"></i> text

7. in main sass file, added @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 font in selector

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

9. compile main sass stylesheet using compass --watch no errors

10. uploaded everything

clarify, structure of 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 

if has read here, appreciate, ideas please?

ok, got , there several issues paths main problem. i'll explain them here in case helps in position.

the problem was: indeed, font files not loading

the errors: related paths , how compass & sass behave @import

the corrections steps above:

1) can't wrong on one...

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

that's important in sass because of way @import works. in sass reference says

sass looks other sass files in current directory, , sass file directory under rack, rails, or merb. additional search directories may specified using :load_paths option, or --load-path option on command line.

i overlooked , place .scss files in other directory , that's why normal @import couldn't found. leads next point.

3) silly try import .scss file url(), tried because regular @import not working. once font-awesome.scss file in sass directory, @import "font-awesome/font-awesome.scss"

4) same here, @import paths relative .scss files , long font-awesome.scss , partials in same folder, no need touch these.

5) right, need change @fontawesomepath match fonts directory

6) sure need html example testing, ok here

7) unnecessary, it's in font-awesome.scss i'm importing. dry.

8) same above, unnecessary too.

9 & 10) yeah girl, job

so, learn this: check paths twice taking account how @import in sass looks (by default) @ current sass directory.