Thursday, November 19, 2015

Adding Font Awesome to your Ionic project


To add Font Awesome (https://fortawesome.github.io/Font-Awesome/) to your ionic project here are the steps that I followed


Prerequisites
  1. node.js installed (v 5.1.0)
  2. Ionic (v 1.7.10)
  3. npm (v 3.3.12)
  4. bower (v 1.6.5)
  5. install gulp locally using, “npm install gulp”
To install Font Awesome, navigate to your Ionic’s parent directory and use the below bower command
  • bower install fontawesome -s
Above command will place all the files relates to Font Awesome in www/lib (because this is defined in .bowerrc file) directory and update bower.json file with the details of this dependency.

Next, we need to update @fa-font-path variable in www/lib/font-awesome/scss/_variables.scss

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

Next, we need to update Ionic’s SCSS file to import Font Awesome. Add below into scss/ionic.app.scss

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

Next, run gulp sass task. This will merge ionic’s CSS and Font Awesome’s CSS. Then, change the index.html to point <link href="css/ionic.app.css" rel="stylesheet"> and remove/comment Ionic’s stylesheet <link href="lib/ionic/css/ionic.css" rel="stylesheet">

Test Font Awesome
<i class="fa fa-google"></i>

No comments: