[Fixed] How to add font-awesome to Angular 2 + CLI project

Issue

I’m using Angular 2+ and Angular CLI.

How do I add font-awesome to my project?

Solution

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!

Leave a Reply

(*) Required, Your email will not be published