How to add font-awesome to Angular 2 CLI project

Follow the below steps for adding Font Awesome to an Angular-2 app created using Angular CLI

  1. Goto the project directory and open Command in Windows / terminal in Mac
  2. npm install font-awesome --save //in Windows
    sudo npm install font-awesome --save //in Mac
  3. In project root folder, find and open the file ‘angular-cli.json’ in any editor 
  4. Locate the styles[] array and add font-awesome references directory. like:
    "apps": [
    {
    ....
    "styles": [
    "../node_modules/font-awesome/css/font-awesome.css"
    "styles.css"
    ],
    ...
    }
    ]
  5. Add some font-awesome icons in any component html file. 
  6. Rerun the server by command
    ng serve

    as ‘angular-cli.json’ is not observed for changes.

  7. Awesome Icons will be visible now

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.