4

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.

vahid Geraeinejad
  • 85
  • 1
  • 1
  • 8
  • Have a look at this [**answer**](https://stackoverflow.com/questions/42106818/font-awesome-with-angular-2/42107084#42107084) – Aravind Jan 08 '18 at 08:56

3 Answers3

7

Install the default package for font-awesome with 

$ npm i font-awesome

Open your angular-cli.json file, search for the properties styles and assets, add this in it : 

  // styles
  "../node_modules/font-awesome/css/font-awesome.css"
  // assets
  "../node_modules/font-awesome/fonts"

(You can of course copy the fonts and put them into your own folder).

  • Thanks, it worked. But of course without the angular-font-awesome package installed, I wont be able to use fa tags in my HTML file. Hopefully, this wouldn't cause any trouble for now. – vahid Geraeinejad Jan 08 '18 at 09:22
  • 1
    You can still make a custom directive, not only this would be useful, but you will be able to make it for every project of yours (and who knows, maybe make your own NPM package !) –  Jan 08 '18 at 09:23
2

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;
}
richie
  • 21
  • 1
1

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';
santosh singh
  • 27,666
  • 26
  • 83
  • 129