Font-awesome icons not loading on Angular4 project

Question

I'm working on an angular 4 project using font-awesome, i followed this guide to install the library with npm: How to add font-awesome to Angular 2 + CLI project

i've configured the project to compile the scss stylesheets with the ng-serve command, my styles paths of the angular-cli.json looks like this:

"styles": [
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "../node_modules/bootstrap/scss/main.scss",
        "../node_modules/font-awesome/scss/font-awesome.scss"

      ],

i want to make a button with an address card icon on it, i'm also working with Bootstrap 4, so it looks like this:

<button class="btn btn-sm btn-primary"><span class="fas fa-address-card"></span></button>

but when it loads, it looks like this:

You should be using the class `fa` instead of `fas`. This class sets the font-face. — Mike Hill, Dec 08 '17 at 00:21

score 27 · Accepted Answer · answered Dec 08 '17 at 02:04

27

You should be using the class fa instead of fas. The fa class sets the font-face. (hat tip to @mike-hill)

View source on http://fontawesome.io/icon/address-card/

answered Dec 08 '17 at 02:04

Andy Roberts

905
8
6

3

OMG it took me way too long to find this answer - why the hell do they generate the examples like this on the homepage? – Sebastian Feb 01 '18 at 16:19
@bigbasti It is for Font Awesome 5. You are probably using an older version. – Klooven May 08 '18 at 17:49

score 4 · Answer 2 · edited Jun 20 '20 at 09:12

4

Font-awesome version 5+

fa prefix has been depricated from version 5. In order to use fas prefix install version 5+ and include in your styles.

install:

yourapp$npm install @fortawesome/fontawesome-free --save

package.json

"styles": [
   "node_modules/@fortawesome/fontawesome-free/css/all.css",
   "src/styles.scss"
  ],

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 08 '20 at 08:45

7guyo

3,047
1
30
31

I think it should be added to the `angular.json` file not `package.json` – Krishnadas PC May 26 '21 at 13:09

score 1 · Answer 3 · answered Nov 24 '18 at 19:48

1

After adding dependencies to Angular.json or Angular-cli.json. 1) stop running App 2) start it It will recognize new resources

answered Nov 24 '18 at 19:48

Hojjat Bakhtiyari

177
10

It took me almost 2 days to figure out my issue.. Thank you for mentioning to restart app after adding new resources.. – Naila Akbar Aug 30 '19 at 19:57

score 1 · Answer 4 · answered Jun 21 '19 at 11:00

First make sure you have properly setup the project requirements to use font-awesome icons by including them in styles[] in angular.jason or simply importing them by like this:

@import "~font-awesome/css/font-awesome.css";

in the component css file. Then it is necessary to have "fa" class in addition to what the font-icons markup gives you. Alternatively you can do like this:

<div class="fa">
<i class="whateverTheIconClassYouWant"></i>
</div>

Inside the div with class="fa" you can directly copy paste the code that is provided in font awsome website.

Hope this helps! Happy coding!!!!

score 0 · Answer 5 · answered Jun 22 '22 at 09:59

after installing font awesome, you can add this to index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Font-awesome icons not loading on Angular4 project

5 Answers5

Font-awesome version 5+

Linked