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

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...

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

You can also receive Free Email Updates: