Add Font Awesome to your Ionic project

In a previous post, I wrote about installing the Ionic framework and generating the scaffolding for a new project.

In this post, we'll use Bower to add Font Awesome to our project.

Use the Node Package Manager to install Bower:

npm install -g bower

Use Bower to install Font Awesome:

bower install fontawesome --save

Bower will place the Font Awesome files in your template project's www/lib directory (as per the setting in .bowerrc) and update bower.json.

First, we need to update the $fa-font-path variable in font-awesome/scss/_variables.scss:

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

Then, we can update the project's scss/ionic.app.scss and import Font Awesome:

@import "www/lib/fontawesome/scss/font-awesome";

Now, make sure you run the project's gulp sass task and then you can add a Font Awesome icon to your template:

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