Use Font-Awesome as a npm package with Ionic2 (Angular2)

  1. Install font-awesome npm package
npm install font-awesome --save

2. Make sure you have ionic_copy and ionic_sass configured in the config section of your package.json file as follows:

"config": {
"ionic_copy": "./config/copy.config.js"
"ionic_sass": "./config/sass.config.js"
}

2–1. if not, then add the above lines to package.json and copy the files copy.config.js and sass.config.js from {{ROOT}}/node_modules/@ionic/app-scripts/config.

3. Add following line includePaths section of sass.config.js

includePaths:[
'node_modules/font-awesome/scss'
]

4. Add the following line to copy.config.js

copyConfig.copyFontAwesome = {
src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
dest: '{{WWW}}/fonts' // it needs to be www/fonts as font-awesome.css search fonts from it.
}

5. Finally, add @import 'font-awesome'; in variables.css (in {{ROOT}}/src/theme folder)

Now you can use font-awesome fonts in your project!

<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Like what you read? Give Ilho Song a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.