To add
Font Awesome (https://fortawesome.github.io/Font-Awesome/) to your ionic
project here are the steps that I followed
Prerequisites
- node.js installed (v 5.1.0)
- Ionic (v 1.7.10)
- npm (v 3.3.12)
- bower (v 1.6.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>