Using font-awesome in ionic 2

Question

How can i use fontawesome with ionic 2, i\'ve following this tutorial but it\'s not working.

Answer 1

font-awesome ionic 2 integration only with configuration files.

1. Download font-awesome via npm (npm install font-awesome --save)

2. In the file package.json from your project add this:

   "config": {
       "ionic_bundler": "webpack",
       "ionic_source_map": "source-map",
       "ionic_copy": "./config/copy.config.js",
       "ionic_sass": "./config/sass.config.js"
   }
   

3. On the root folder of your project create config folder and copy the files copy.config.js and sass.config.js (this files are located in (..\node_modules\@ionic\app-scripts\config)

4. Modify the copied files. In sass.config.js add the reference to font-awesome, at the end verify that you have something like this

   includePaths: [ 'node_modules/ionic-angular/themes', 'node_modules/ionicons/dist/scss', 'node_modules/ionic-angular/fonts', 'node_modules/font-awesome/scss' ],

The most important part here is the last line.

in copy.config add this:

copyFontAwesome:{
    src: 'node_modules/font-awesome/fonts/',
    dest: '{{WWW}}/fonts/'
}

The most important part here is dest '{{WWW}}/fonts/' and not {{WWW}}/assets/fonts/', it because font-awesome.css search fonts in "www/fonts" file.

5. And finally add @import "font-awesome"; in variables.css (src\theme folder)

After perform all this steps you can use font-awesome in your ionic 2 project.

It's all