Include font-awesome in bootstrap sass via Bower

Question

I've installed bootstrap-sass-official and font-awesome using bower. I've tried all the possible combinations to include the fontawesome in bootstrap using scss.

The most probable solution is specifying in my app's main.scss file the following:

$fa-font-path: "../bower_components/font-awesome/fonts";
@import "font-awesome/scss/font-awesome";
@import '../../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.scss';

And to comment out the @import "bootstrap/glyphicons"; inside the main bootstrap.scss file.

If I launch my grunt serve at http://localhost:9000/ (I'm using a gruntfile from the default yeoman webapp) I can see my app running.

I can see my main.css file with all the fontawesome classes and inside it the reference url to the location of the fonts (../bower_components/font-awesome/fonts/fontawesome-webfont.eot).

Everything seems ok but whenever I use a FontAwesome icon, for example <span class="fa-star"></span> I get an empty square box instead of the icon. I'm missing something I can't see...

Answer 1

<span class="fa-star"></span> 

It won't do anything.

In order to use Font awesome, you need to prefix the class by 'fa' :

<span class="fa fa-star"></span>