font-awesome fonts are not loaded into angular project

Question

I've been using angular 5 for a while now and it seems that I can't load any font-awesome icons into my built project.

I followed the steps thoroughly as mentioned in the link below. https://www.npmjs.com/package/angular-font-awesome

It appears that the CSS file is included in the project but it's not able to load the fonts as I checked in the network section of my browser's developer tools.

All I'm seeing in the rendered page is square icons instead of font-awesome icons.

I would really appreciate it if anyone can help me with this.

Solution 1

Ultimately you should end up with a file structure with sub-directories of CSS, JS, FONTS, and the html file where the font icons will be used. The following code points to where the fonts are and MUST be included in a stylesheet. Put a link in your html file to it. Make this a separate stylesheet if you wish and call it "font.css", but make sure you link to this in every html file you want font-awesome icons. I'm a newbie - in time I'll work on a higher plane.

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

Solution 2

Install the font-awesome library and add the dependency to package.json...

Using CSS

To add Font Awesome CSS icons to your app add following configuration in angular-cli.json

"styles": [
  "styles.css",
  "../node_modules/font-awesome/css/font-awesome.css"
]

Using SASS

Create an empty file _variables.scss in src/.

Add the following to _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts';

In styles.scss add the following:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';