3

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.

4

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).

|improve this answer|||||
  • 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 8 '18 at 9: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 !) – user4676340 Jan 8 '18 at 9: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;
}
|improve this answer|||||
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';
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.