Font Awesome fonts not loading in Angular afte ng build

Question

I am using Angular 8. I have added the font-awesome path in the angular.json like this.

"./node_modules/font-awesome/css/font-awesome.css"

However, all the icons were coming as empty boxes (not loading). So, I put all the font-awesome files in the assets folder. Then, I put a link to the css file in the index.html

  <link rel="stylesheet" href="assets/styles/css/font-awesome.css">

It still did not work. So, I hit the font-awesome.css file directly from my browser.

mysite.mymy/assets/styles/css/font-awesome.css

It did open up in the browser. The css file has a link to "../fonts/". Like below:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

So, I hit that link.

mysite.mymy/assets/styles/fonts/fontawesome-webfont.eot?v=4.7.0

But it is redirecting to the home page. What's the issue? Icons are not loading.

Do u use ng build --prod ? And when it is in node modules when u check emty boxes in developer console do u see any fontawesome css there? — mr. pc_coder, Apr 19 '20 at 12:35
Only ng build. Yes, font-awesome css are coming when i inspect the empty boxes. — joler-botol, Apr 19 '20 at 12:43

score 2 · Accepted Answer · answered Apr 19 '20 at 13:19

After Angular 2.0 final release, the structure of the Angular2 CLI project has been changed — you don't need any vendor files, no system.js — only webpack. So you do:

npm install font-awesome --save
In the angular-cli.json file locate the styles[] array and add font-awesome references directory here, like below:

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      ....
      "styles": [
          "styles.css",
          "../node_modules/bootstrap/dist/css/bootstrap.css",
          "../node_modules/font-awesome/css/font-awesome.css" // -here ebpack will 
   automatically build a link css element out of this!?
      ],
      ...
  }
  ]
],

In more recent versions of Angular, use the angular.json file instead, without the ../. For example, use "node_modules/font-awesome/css/font-awesome.css"

Place some font-awesome icons in any html file you want:
Stop the application Ctrl + c then re-run the app using ng serve because the watchers are only for the src folder and angular-cli.json is not observed for changes.
Enjoy your awesome icons!

I have put it in the angular.json as well. I copied it to the assets specifically because it was not working — joler-botol, Apr 19 '20 at 17:22

Font Awesome fonts not loading in Angular afte ng build

1 Answers1