Use Font Awesome on Yeoman AngularJS Projects

By default, the bootstrap-sass package uses a glyphicons png file for icons. This is a limited set of icons and I usually need more. Here’s how:

The 4.x.x Way

Updated 11/08/2013

  1. Bootstrap your project: $ yo angular myApp
  2. Install Font Awesome: $ bower install font-awesome --save
  3. Add Bootstrap to the top of main.scss
    • @import "bootstrap-sass/lib/bootstrap";
  4. Change the font path and add the Font Awesome CSS
    • $fa-font-path: "/bower_components/font-awesome/fonts";
    • @import "font-awesome/scss/font-awesome";

To summarize, here’s what the top of my main.css file looks like now:
@import "bootstrap-sass/lib/bootstrap";
$fa-font-path: "/bower_components/font-awesome/fonts";
@import "font-awesome/scss/font-awesome";

Things have changed a bit with the 4.0.3 release of Font Awesome. Along with slightly different file names, the biggest difference is in the html classes. You now have to include the “fa” class along with the name of the icon, like this:

<i class="fa fa-anchor"></i>

The 3.x.x Way

  1. Bootstrap your project: $ yo angular myApp
  2. Install Font Awesome: $ bower install font-awesome --save
  3. Add Bootstrap to the top of main.scss
    • @import "bootstrap-sass/lib/bootstrap";
    • @import "bootstrap-sass/lib/responsive";
  4. Change the font path and add the Font Awesome CSS
    • $FontAwesomePath: "/bower_components/font-awesome/font";
    • @import "font-awesome/scss/font-awesome";

To summarize, here’s what the top of my main.css file looks like now:

@import "bootstrap-sass/lib/bootstrap";
@import "bootstrap-sass/lib/responsive";

$FontAwesomePath: "/bower_components/font-awesome/font";
@import "font-awesome/scss/font-awesome";

Bonus!

If you just want the included glyphicons to work (which is broken out of the box currently fixed as of Generator Angular v0.4.0), you need to change the sprite path.

  1. Bootstrap your project with $ yo angular myApp
  2. Create an images directory in the app/ folder: $ mkdir app/images
  3. Download Twitter Bootstrap from here: http://twitter.github.io/bootstrap/
  4. Unzip the Twitter Bootstrap file you just downloaded and copy bootstrap/img/glyphicons-halflings.png and bootstrap/img/glyphicons-halflings-white.png to your project’s myApp/app/images/ directory
  5. Add these lines to the top of main.scss to change the sprite path:
    • $iconSpritePath: "/images/glyphicons-halflings.png";
    • $iconWhiteSpritePath: "/images/glyphicons-halflings-white.png";
  6. Then import bootstrap:
    • @import "bootstrap-sass/lib/bootstrap";
    • @import "bootstrap-sass/lib/responsive";

So the top of your main.scss file now looks like this:

$iconSpritePath: "/images/glyphicons-halflings.png";
$iconWhiteSpritePath: "/images/glyphicons-halflings-white.png";

@import "bootstrap-sass/lib/bootstrap";
@import "bootstrap-sass/lib/responsive";

This entry was posted in Musings and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

6 Comments

  1. Nando
    Posted September 7 2013 at 4:54 pm | Permalink

    Hi, I get the following error from Grunt:

    error app/styles/libs.scss (Line 1: File to import not found or unreadable: bootstrap-sass/lib/bootstrap.

    If I install the bootstrap-sass package with bower install bootstrap-sass, the file ./app/bower_components/sass-bootstrap/lib/bootstrap.scss is created (notice it is created as sass-bootstrap, instead of bootstrap-sass). Also, no “responsive.scss” file is created under ./app/bower_components/sass-bootstrap/lib/ folder. What am I doing wrong here?

  2. jon
    Posted September 8 2013 at 2:57 pm | Permalink

    Was helpul, thanks!

  3. Posted November 12 2013 at 6:55 pm | Permalink

    Thanks for tip.
    But bootstrap sass is different for me using generator-angular@0.6.0-rc.1

    @import ‘sass-bootstrap/lib/bootstrap’;

  4. Posted November 14 2013 at 3:13 pm | Permalink

    Hey Nando,

    Try out the 4.x.x way. Lot’s of changes!

  5. Posted March 28 2014 at 9:44 am | Permalink

    thank’s for the tips

  6. Posted April 16 2014 at 4:30 pm | Permalink

    Great post, thank you so much.
    A few notes:
    - When you bower install now, the component and the folder is ‘fontawesome’. so probably we need to update:
    $fa-font-path: “/bower_components/fontawesome/fonts”;
    @import “fontawesome/scss/font-awesome”;
    - When i’m using Yeoman and deploying, I need to copy the fonts to a folder so i’ve used the copy task of Grunt. am i missing something and it should happen by itself?

    Thanks!
    Uri

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>