Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font-awesome icons not loading on Angular4 project

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:

like image 689
Carlos Pisarello Avatar asked Dec 08 '17 00:12

Carlos Pisarello


People also ask

How do I fix Font Awesome icons not showing?

Make sure you're using the latest and greatest by updating your CDN code reference, updating your Font Awesome package via npm, or downloading a fresh copy of Font Awesome. You can check with version an icon was added to on its detail page (e.g. question-circle was added in Verion 1 but last updated in 5.0. 0).

Why are my Font Awesome icons not showing in HTML?

If your page uses HTTPS, do you link to the font-awesome CSS using HTTPS (replace http:// with https:// in the link above). Double check that you don't have AdBlock Plus or uBlock enabled. They might be blocking some of the icons. If you are using IE8, are you using a HTML5 Shim?


2 Answers

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/

like image 61
Andy Roberts Avatar answered Sep 29 '22 06:09

Andy Roberts


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"
  ],
like image 27
7guyo Avatar answered Sep 29 '22 07:09

7guyo