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.

Solution 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"
]

Solution 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.)

Solution 3

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

Solution 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.

View more solutions

Comments

[jgerstle]

I'm getting the same issue when I do that (box instead of icon). Plus I'd rather put it in my scss files and not in the angular-cli.

[Jorawar Singh]

Are you including font-awesome.css? You can also import in your scss file as you are saying using import.

[jgerstle]

I want to import it in my scss file using import but I'm getting boxes instead of icons. No I used the scss file like I said I want to use scss. If all else fails I guess I can use css, but I'd rather be consistent.

[Jorawar Singh]

Can you share the so i can take a look?

[jgerstle]

what/how exactly should I share?

[jgerstle]

thanks for the help as i commented above I got it working by using this answer: stackoverflow.com/a/45147045/1259742