CODEWITHSUNDEEP
angularfont-awesome
jgerstle
jgerstle

Reputation: 1684

How to add font-awesome to angular 4+ project

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.

Upvotes: 6

Views: 14641

Answers (4)

Just Shadow
Just Shadow

Reputation: 11881

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

Upvotes: 6

Imal Hasaranga Perera
Imal Hasaranga Perera

Reputation: 10029

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.

Upvotes: 1

LLai
LLai

Reputation: 13396

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

Upvotes: 8

Jorawar Singh
Jorawar Singh

Reputation: 7621

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

Upvotes: 2

Related Questions