Font Awesome icons don't show up correctly during development, installed with bower

Question

I scaffold my app with yo

yo gulp-webapp //I create a basic boilerplate with bootstrap sass

Then I install FontAwesome

bower install font-awesome --save

This is what I have on top of my main.scss

$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";

// bower:scss
@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
@import "../../bower_components/fontawesome/scss/font-awesome.scss";
// endbower

Then I add this to my html page

<i class="fa fa-angle-right"></i>

And if I launch "gulp serve" It only show a white square, instead if I build with "gulp" the result html works correctly.

The result main.css contain all fa class so I think the problem is with this var

$fa-font-path:        "../fonts" !default;

This var is here: bower_components/font-awesome/scss/-variables.scss

Answer 1

Try to set the

$fa-font-path: "fonts" !default;

in the main.scss file before the @import declarations.

That did the trick for me. Also, from the font awesome page (http://fortawesome.github.io/Font-Awesome/get-started/) it states:

PRO: Custom LESS or SASS

Use this method to customize Font Awesome 4.2.0 using LESS or SASS.

Copy the font-awesome/ directory into your project.

Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the @fa-font-path or $fa-font-path variable to point to your font directory.

@fa-font-path: "../font";

The font path is relative from your compiled CSS directory. Re-compile your LESS or SASS if using a static compiler. Otherwise, you should be good to go. Check out the examples to start using Font Awesome!

Answer 2

I use the gulp build process from generator-gulp-angular which uses wiredep to inject the bower dependencies.

But for some reasons the fontawesome does not work out of the box. Actually I had following problems:

• The font-awesome.css was not injected in the index.html
• When building the dist version the font files were not present in the fonts directory

Finally I found this very helpful message by silvenon

Append overrides to your bower.json:

{
    "name": "webapp",
    "dependencies": {
        "modernizr": "~2.6.2",
        "jquery": "~1.11.0",
        "fontawesome": "~4.0.3"
    },
    "devDependencies": {},
    "overrides": {
        "fontawesome": {
            "main": [
                "css/font-awesome.css",
                "fonts/fontawesome-webfont.eot",
                "fonts/fontawesome-webfont.woff",
                "fonts/fontawesome-webfont.ttf",
                "fonts/fontawesome-webfont.svg"
             ]
         }
     }
}

After that the wiredep task will inject the css in the index.html and also copy the font files to the fonts folder.