webpack - How to add font-awesome to Angular 2 + CLI project

Question

I'm using Angular 2+ and Angular CLI.

How do I add font-awesome to my project?

Answer 1

After Angular 2.0 final release, the structure of the Angular2 CLI project has been changed — you don't need any vendor files, no system.js — only webpack. So you do:

1. npm install font-awesome --save

2. In the angular-cli.json file locate the styles[] array and add font-awesome references directory here, like below:

   "apps": [
       {
         "root": "src",
         "outDir": "dist",
         ....
         "styles": [
             "styles.css",
             "../node_modules/bootstrap/dist/css/bootstrap.css",
             "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
         ],
         ...
     }
     ]
   ],
   

   In more recent versions of Angular, use the angular.json file instead, without the ../. For example, use "node_modules/font-awesome/css/font-awesome.css".

3. Place some font-awesome icons in any html file you want:

   <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>
   

4. Stop the application Ctrl + c then re-run the app using ng serve because the watchers are only for the src folder and angular-cli.json is not observed for changes.

5. Enjoy your awesome icons!