ng-cli 6 and font awesome icons not working

6
votes

I am using font-awesome 4.70, angular 6.0.8, and cli 6.0.8(full versioning below) I am trying to replace our existing webpack process with the cli's "ng build". I have run into an issue with font awesome's icons not showing up. I have seen similar issues in the past with older versions but I havent found a solution yet.

I have the fonts hooked up in my assets

assets:[
    "./node_modules/font-awesome/fonts",
    //other assets
]

And I am including the css in the styles portion of my angula.json

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

I am not using "ng serve", I am only using the build command to transpile my code. In the browser I am getting these errors.

GET http://localhost:29380/fontawesome-webfont.woff2?v=4.7.0 404 (Not Found)

GET http://localhost:29380/fontawesome-webfont.woff?v=4.7.0 404 (Not Found)

GET http://localhost:29380/fontawesome-webfont.ttf?v=4.7.0 404 (Not Found)

I see the assests in the output directory but for some reason they are not available and I am getting 404s.

enter image description here

4
angularfont-awesomeangular-cli-v6
github.com/angular/angular-cli/wiki/… – JB Nizet
Possible duplicate of How to add font-awesome to Angular 2 + CLI project – Vikas
Thank you for your response. I saw this posting and I tried to follow it. The "ussing css" section has nothing in it other than the addition line in the angular.json styles section which I have included. I am not using scss, but that being said I tried creating the two files it suggests and still I am getting the empty squares in my browser and the same 404 errors – Jake
i got it working through a hacky solution, I altered the source code. in the font-face.css file the first section is the font-face and there are a lot of "src" properties and all URLs have relative pathing and they all start with a "..". To get the icons to appear I removed the leading "..". I'm going to keep changing around the configuration to see if I can get it working with the non-altered font-awesome.css file. – Jake

4 Answers

2
votes

I also went through this problem and decided as follows. In the angular.json file in the build > assets section I included the path of the fonts to be copied:

{
     "glob": "**/*",
     "input": "node_modules/font-awesome/fonts",
     "output": "assets/fonts"
}

And in the build > styles section I've included the font-awesome path in the node_modules folder:

{
    "input": "node_modules/font-awesome/scss/font-awesome.scss"
}

And finally, in the global scss-style file I've included these instructions:

$fa-font-path: "../assets/fonts" !default;
i[class^="fa-"], ion-icon[class^="fa-"] {
    font-family: "FontAwesome" !important;
}

Note that in the global scss-style file I also include the ion-icon, in case you are using Ionic.

I hope this solves your problem.

1
votes

I had the same issue and follow the instruction!! it works,

step 1 : Remove fortawesome:registry and authToken (if you have)

npm config delete "@fontawesome:registry"
npm config delete "//npm.fontawesome.com/:_authToken"

step 2:

after you need to install the package

npm install --save-dev @fontawesome/fontawesome-free

step 3:

in your angular.json add 

"node_modules/@fontawesome/fontawesome-free/js/all.js"
"node_modules/@fontawesome/fontawesome-free/css/all.css"

add js and css file in right block (scripts/styles)

Note : add it in both tests & build blocks

0
votes

First, install font awesome

npm install font-awesome

and then add

@import "~font-awesome/css/font-awesome.css;

in the styles.css file.

-7
votes

click font-awesome/fonts/fontawesome-webfont.ttf or font-awesome/fonts/FontAwesome.otf file and install the FontAwesome font in your OS