ng-cli 6 and font awesome icons not working

Question

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.

Answer 1

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.