How to add font-awesome to angular 4+ project

Question

I am having issues adding font-awesome to my Angular 4+ project using scss. I have tried the many steps given here: How to add font-awesome to Angular 2 + CLI project for scss based projects mainly adding @import '~/../node_modules/font-awesome/scss/font-awesome'; to styles.scss and $fa-font-path : '~/../node_modules/font-awesome/fonts'; to variables.scss. The thing is it compiles and it seems like it is working because I at least get a block where the icon is supposed to be, whereas without it I get nothing, but that's it. I can try importing the css files in the angular-cli, but I'd rather do it the scss way. Has anyone had success with this in an angular 4+ project?

I'm posting in a new topic because it seems like it's an issue in Angular 4, not angular 2, based on the comments in that post, and that post is old.

Answer 1

You can do this by pointing to your font files in your styles

// styles.scss
$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

Or as others have mentioned, you can load through webpack

// angular-cli.json
"styles": [
    "../node_modules/font-awesome/scss/font-awesome.scss",
    "styles.scss"
]

Answer 2

There is a much simpler way of doing this (without need of copying folders,
adding something in angular-cli json and using "node_modules" while importing).

Here are the steps:

1. Install FontAwesome package as usual:

   npm install --save @fortawesome/fontawesome-free 
   

2. Add following lines to your styles.scss file:

   $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
   @import "~@fortawesome/fontawesome-free/scss/fontawesome";
   @import "~@fortawesome/fontawesome-free/scss/solid";
   @import "~@fortawesome/fontawesome-free/scss/regular";
   @import "~@fortawesome/fontawesome-free/scss/brands"; // OPTIONAL. Remove if you are not using this
   

Please also note that since FontAwesome 5 fa is considered as fas
which means in case of using fa in html you'll see solid (bolder) icons.
So make sure you are using far instead of fa for regular (non-bold)
fonts if you are going to upgrade from earlier versions of FontAwesome.
(This might require from you to upgrade to Pro version.)

Answer 3

Npm install font awesome and Just add to styles in .angular-cli.json file and it will bundle for you.

Answer 4

Here is how you install 5.2.x version of font-awesome

1. npm install @fortawesome/fontawesome-free
2. copy webfonts folder inside of node_module/fortawesome/fontawesome-free to assets/scss/ folder ( or any folder inside assets )
3. add $fa-font-path: "webfonts"; to thestyless.scss

4. finally add following imports to the styles.scss

   @import "~@fortawesome/fontawesome-free/scss/fontawesome";

   @import "~@fortawesome/fontawesome-free/scss/solid";

   @import "~@fortawesome/fontawesome-free/scss/brands";

There is another better way of doing it documented but that explain how you want to add it as an angular module in my case I would like fonts to do its job in the simplest way possible.