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

Update for Ionic 2, Ionic 3+: just one step:

Add font-awesome link to your index.html

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Answer 2

There is still a lot of confusion on what is a best practice when it comes to adding FontAwesome to an ionic2 app. I wrote a tutorial about it to mitigate some of that confusion. I hope this helps anybody else out there looking for this info

http://luiscabrera.site/tech/2017/01/09/fontawesome-in-ionic2.html

Answer 3

I tried most of the answers above but they were either too complicated or had a limitation when the core of Ionic2 was upgraded so here is my solution:

It requires manually upgrading of FA when a new version comes out but I don't need to upgrade often as I only use a few select icons.

Ignore the SASS files and copy the contents of \node_modules\font-awesome\fonts to \src\assets\fonts. Also copy \node_modules\font-awesome\css\font-awesome.min.css to the same place.

Reference the csss in your index.html file like this:

  <!--Custom Fonts-->
  <link href="assets/fonts/comfortaa/comfortaa.css" rel="stylesheet" />
  <link href="assets/fonts/gloriahallelujah/gloriahallelujah.css" rel="stylesheet" />
  <link href="assets/fonts/font-awesome.min.css" rel="stylesheet" />

Then to use it, put this into the page's scss:

  .logo-text {
    font-family: 'comfortaa-bold';
  }

and this in the html:

<h4 class="white-text slogan-text">Come bien a la mitad de precio</h4>

And that should be it...

Answer 4

Update in ionic 2 RC.0

• Download the font-awesome library.
• Create "fonts" folder in src/assets and copy the fonts from the font-awesome/fonts folder
• Copy the scss folder and paste it under src/theme/scss
• Open the variables.scss file, and copy the below code

@import "scss/font-awesome"; @font-face { font-family: 'FontAwesome'; src: url('../assets/fonts/fontawesome-webfont.eot?v=#{$fa-version}');
src: url('../assets/fonts/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
url('../assets/fonts/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
url('../assets/fonts/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
url('../assets/fonts/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
url('../assets/fonts/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }

To include your icon in HTML

  <i primary class="fa fa-cart-plus fa-lg"></i>

Ionic Beta

Install fontAwesome from the npm library.

Modify the below changes to your gulpfile.ts.

• Include gulp task for adding icon css and fonts to your build

gulp.task('myCss', function(){   
     return gulp.src('path-to-your-font-lib/style.css')
         .pipe(gulp.dest('www/build/css'))    
});  
gulp.task('myFonts', function(){   
    return gulp.src('path-to-your-font-lib/fonts/**/*.+(eot|svg|ttf|woff)')
         .pipe(gulp.dest('www/build/fonts'))    
});

• Modify your gulp build and watch task as follows (Adding your font and css on watch and build)

gulp.task('watch', ['clean'],  function(done){    
//existing ionic2 code 
} 
gulp.task('build', ['clean','myCss','myFonts'], function(done){   
//existing ionic2 code
}

Include @import "../../node_modules/font-awesome/scss/font-awesome"; in app.core.scss file

To include your icon in HTML

  <i primary class="fa fa-cart-plus fa-lg"></i>

Answer 5

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.

<i class="fa fa-circle" style="color:#14afef; font-size: small"></i>

It's all

Answer 6

Similar Approach as @Edward suggested, but a bit cleaner way to do this would be

1) npm install font-awesome --save

2) In package.json, add

"ionic_copy": "./config/copy.config.js", "ionic_sass": "./config/sass.config.js",

3) Create the below files at root level of your project and add following content.

In the file: ./config/copy.config.js Add

const copyConfig = require('../node_modules/@ionic/app-scripts/config/copy.config');
copyConfig.copyFonts.src.push('{{ROOT}}/node_modules/font-awesome/fonts/**/*');

In the file: ./config/sass.config.js Add

const sassConfig = require('../node_modules/@ionic/app-scripts/config/sass.config');

sassConfig.includePaths.push('node_modules/font-awesome/scss');

4) In ./src/theme/variables.scss

$fa-font-path: "../assets/fonts";
@import 'font-awesome';