Add Font-Awesome to Angular-Cli project when build in production

Question

I have followed the steps explained in the Angular-Cli documentation to include Font-Awesome to my project https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/include-font-awesome.md

So I have this in my angular-cli.json:

"styles": [
            "../node_modules/boosted/dist/css/boosted.min.css",
            "../node_modules/boosted/dist/css/orangeIcons.min.css",
            "../node_modules/font-awesome/css/font-awesome.min.css",
            "styles.css"
],

And everything worked fine when doing ng serve and seeing my project on localhost:4200.

Unfortunately, when doing ng build --prod, it generate the dist folder, including the font-awesome files:

And I also verified if the font was added to my style.[...].bundle.css and it does:

Then, when deployed on a server (Apache Tomcat 8.5), no font-awesome icons are displayed.

I don't use SASS by the way.

Here is my Angular configuration/version:

@angular/cli: 1.4.3
node: 6.11.3
os: win32 x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.3
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.3.4

So, what can I do to make this work ?

Pleas check your package.json file where your font-awesome npm package is installed in 'devdependencies', If so then change it to 'dependencies' — Srinivasan K K
@Srini It was already in "dependencies"...and I already answered my own question just below ^^ — Neyt

Neyt Neyt · Accepted Answer · 2017-11-16T14:00:19

Okay, so I have see someone say something about this, but I didn't try at that moment. My solution is to put the "../node_modules/font-awesome/css/font-awesome.min.css" above the other style file in angular-cli.json.

It seems that the other .css files overwrite the font-awesome style, but in that case, I don't understand why anything was wrong in development mode.

So, my styles in angular-cli.json looks like this now:

"styles": [
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/boosted/dist/css/boosted.min.css",
        "../node_modules/boosted/dist/css/orangeIcons.min.css",
        "styles.css"
],

Add Font-Awesome to Angular-Cli project when build in production

2 Answers