6

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.

jgerstle
  • 1,674
  • 5
  • 25
  • 35

4 Answers4

8

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"
]
LLai
  • 13,128
  • 3
  • 41
  • 45
6

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

Just Shadow
  • 10,860
  • 6
  • 57
  • 75
2

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

Jorawar Singh
  • 7,463
  • 4
  • 26
  • 39
  • 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. – jgerstle Oct 24 '17 at 14:51
  • Are you including font-awesome.css? You can also import in your scss file as you are saying using import. – Jorawar Singh Oct 24 '17 at 14:53
  • 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. – jgerstle Oct 24 '17 at 15:08
  • Can you share the so i can take a look? – Jorawar Singh Oct 24 '17 at 15:21
  • what/how exactly should I share? – jgerstle Oct 24 '17 at 15:43
  • thanks for the help as i commented above I got it working by using this answer: https://stackoverflow.com/a/45147045/1259742 – jgerstle Oct 24 '17 at 16:19
1

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.

Imal Hasaranga Perera
  • 9,683
  • 3
  • 51
  • 41