Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I'm using Angular 2+ and Angular CLI.

How do I add font-awesome to my project?

like image 415
Nik Avatar asked Aug 05 '16 19:08

Nik


People also ask

How do I add Font Awesome to the input field?

The font-awesome icon can be placed by using the fa prefix before the icon's name. Example: In this example, we will take a form where the input field is necessary. After that, we will place the font-awesome icon inside the input field. We will use the CDN link to use the font-awesome icons.


1 Answers

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!
like image 139
AIon Avatar answered Oct 21 '22 04:10

AIon