Saturday, July 15, 2017

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
Related Posts Plugin for WordPress, Blogger...

Receive all updates via Facebook. Just Click the Like Button Below

You can also receive Free Email Updates: