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

Question

I'm using Angular 2+ and Angular CLI.

How do I add font-awesome to my project?

Answer 1

I wasted several hours trying to get the latest version of FontAwesome 5.2.0 working with AngularCLI 6.0.3 and Material Design. I followed the npm installation instructions off of the FontAwesome website

Their latest docs instruct you do install using the following:

npm install @fortawesome/fontawesome-free

After wasting several hours I finally uninstalled it and installed font awesome using the following command (this installs FontAwesome v4.7.0):

npm install font-awesome --save

Now it's working fine using:

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome.scss";
<mat-icon fontSet="fontawesome" fontIcon="fa-android"></mat-icon>

Answer 2

For Angular 6,

First npm install font-awesome --save

Add node_modules/font-awesome/css/font-awesome.css to angular.json.

Remember not to add any dots in front of the node_modules/.

Answer 3

If you are using SASS, you can just install it via npm

npm install font-awesome --save

and import it in your /src/styles.scss with:

$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";

Tip: Whenever possible, avoid to mess with angular-cli infrastructure. ;)

Answer 4

The top answer is a bit outdated and there is a slightly easier way.

1. install through npm

   npm install font-awesome --save

2. in your style.css:

   @import '~font-awesome/css/font-awesome.css';

   or in your style.scss:

   $fa-font-path: "~font-awesome/fonts"; @import '~font-awesome/scss/font-awesome';

   Edit: as noted in the comments the line for fonts must be changed on newer versions to $fa-font-path: "../../../node_modules/font-awesome/fonts";

using the ~ will make sass look into node_module. It's better to do it this way than with the relative path. The reason is that if you upload a component on npm, and you import font-awesome inside the component scss then it will work properly with ~ and not with the relative path that will be wrong at that point.

This method works for any npm module that contains css. It works for scss as well. However if you are importing css into your styles.scss it won't work (and maybe vice versa). Here is why

Answer 5

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!

Answer 6

With Angular2 RC5 and angular-cli 1.0.0-beta.11-webpack.8 you can achieve this with css imports.

Just install font awesome:

npm install font-awesome --save

and then import font-awesome in one of your configured style files:

@import '../node_modules/font-awesome/css/font-awesome.css';

(style files are configured in angular-cli.json)