Font awesome for ionic2

1

Is there any instructions how to add font-awesome to ionic2 project?

Thanks

Patrice

2

Maybe it could help you.

3

This doesn’t help because ionic.config.js is depreciated. Need a different way.

4

@GareraDev, If you are using the gulpfile.js to build your project as per: https://github.com/driftyco/ionic2-app-base then you can do what I did.

I imported "font-awesome": "4.6.1" via NPM as a devDependency.
After this, I added @import "font-awesome"; to my app.core.scss.
In the gulpfile I expanded the gulp.tasks for sass and fonts, at the bottom of the file to the following:

gulp.task('sass', function(){
  return buildSass({
    sassOptions: {
      includePaths: [
        'node_modules/ionic-angular',
        'node_modules/ionicons/dist/scss',
        'node_modules/font-awesome/scss'
      ]
    }
  });

and did the same for the fonts task:

gulp.task('fonts', function () {
  return copyFonts({
    src: [
      'node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)',
      'node_modules/font-awesome/fonts/**/*.+(eot|ttf|woff|woff2|svg)'
    ]
  });
});

I hope that helps. Let me know how you get on.

2 Likes
5

@pjhartin After doing what you suggested I get this error back when running ionic serve.

Error: File to import not found or unreadable: /Users/AnthonyGarera/Ionic-Github-Search/node_modules/font-awesome Parent style sheet: /Users/AnthonyGarera/Ionic-Github-Search/app/theme/app.core.scss on line 14 of app/theme/app.core.scss @import "/Users/AnthonyGarera/Ionic-Github-Search/node_modules/font-awesome"; ^

Any suggestions?

6

Drop the full filepath and only use @import "font-awesome"