Source:  Twitter logo

I'm using Angular 2+ and Angular CLI.

How do I add font-awesome to my project?

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!
524 users liked answer #0dislike answer #0524
AIon profile pic
AIon

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. ;)

138 users liked answer #1dislike answer #1138
F.D.Castel profile pic
F.D.Castel

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

77 users liked answer #2dislike answer #277
Ced profile pic
Ced

There are 3 parts to using Font-Awesome in Angular Projects

  1. Installation
  2. Styling (CSS/SCSS)
  3. Usage in Angular

Installation

Install from NPM and save to your package.json

npm install --save font-awesome

Styling If using CSS

Insert into your style.css

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

Styling If using SCSS

Insert into your style.scss

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

Usage with plain Angular 2.4+ 4+

<i class="fa fa-area-chart"></i>

Usage with Angular Material

In your app.module.ts modify the constructor to use the MdIconRegistry

export class AppModule {
  constructor(matIconRegistry: MatIconRegistry) {
    matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

and add MatIconModule to your @NgModule imports

@NgModule({
  imports: [
    MatIconModule,
      ....
  ],
  declarations: ....
}

Now in any template file you can now do

<mat-icon fontSet="fontawesome" fontIcon="fa-area-chart"></mat-icon>
58 users liked answer #3dislike answer #358
muttonUp profile pic
muttonUp

UPDATE Feb 2020:
fortawesome package now supports ng add but it is available only for angular 9 and up:

ng add @fortawesome/angular-fontawesome

UPDATE 8 Oct 2019:

You can use a new package https://www.npmjs.com/package/@fortawesome/angular-fontawesome

npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

Add FontAwesomeModule to imports in src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
@NgModule({
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Tie the icon to the property in your component src/app/app.component.ts:

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faCoffee = faCoffee;
}

Use the icon in the template src/app/app.component.html:

<fa-icon [icon]="faCoffee"></fa-icon>

ORIGINAL ANSWER:

Option 1:

You can use angular-font-awesome npm module

npm install --save font-awesome angular-font-awesome

Import the module:

...
//
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
  //...
  imports: [
    //...
    AngularFontAwesomeModule
  ],
  //...
})
export class AppModule { }

If you're using Angular CLI, add the font-awesome CSS to styles inside the angular-cli.json

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css"
],

NOTE: If using SCSS preprocessor just change the css for scss

Example Use:

<fa name="cog" animation="spin"></fa>

Option 2:

There is an official story for that now

Install the font-awesome library and add the dependency to package.json

npm install --save font-awesome

Using CSS

To add Font Awesome CSS icons to your app...

// in .angular-cli.json

"styles": [
  "styles.css",
  "../node_modules/font-awesome/css/font-awesome.css"
]

Using SASS

Create an empty file _variables.scss in src/.

Add the following to _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts'; In styles.scss add the following:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

Test

Run ng serve to run your application in develop mode, and navigate to http://localhost:4200.

To verify Font Awesome has been set up correctly, change src/app/app.component.html to the following...

<h1>
  {{title}} <i class="fa fa-check"></i>
</h1>

After saving this file, return to the browser to see the Font Awesome icon next to the app title.

Also there is a related question Angular CLI outputs the font-awesome font files the dist root as by default angular cli outputs the fonts in to the dist root, which is by the way not an issue at all.

39 users liked answer #4dislike answer #439
angularrocks.com profile pic
angularrocks.com

Thought I would throw in my resolution to this since font-awesome is now installed differently according to their documentation.

npm install --save-dev @fortawesome/fontawesome-free

Why it is fortawesome now escapes me but thought I would stick with the most recent version rather than falling back to the old font-awesome.

Then I imported it into my scss

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";

Hope this helps

17 users liked answer #5dislike answer #517
Nabel profile pic
Nabel

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)

15 users liked answer #6dislike answer #615
shusson profile pic
shusson

Accepted answer is outdated.

For angular 9 and Fontawesome 5

  1. Install FontAwesome

    npm install @fortawesome/fontawesome-free --save

  2. Register it on angular.json under styles

    "node_modules/@fortawesome/fontawesome-free/css/all.min.css"

  3. Use it on your application

14 users liked answer #7dislike answer #714
Ron Michael profile pic
Ron Michael

Many instructions above work, I suggest looking at those. However, something to note:

Using <i class="fas fa-coffee"></i> did not work in my project (new practice project only a week old) after installation and the sample icon here was also copied to the clipboard from Font Awesome within the past week.

This<i class="fa fa-coffee"></i> does work. If after installing Font Awesome on your project it isn't yet working, I suggest checking the class on your icon to remove the 's' to see if it works then.

7 users liked answer #8dislike answer #87
mckenna profile pic
mckenna

For fontawesome 5.x+ the most simplest way would be the following,

install using npm package: npm install --save @fortawesome/fontawesome-free

In your styles.scss file include:

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';

Note: if you have _variables.scss file then it's more appropriate to include the $fa-font-path inside it and not in styles.scss file.

7 users liked answer #9dislike answer #97
Imtiaz Shakil Siddique profile pic
Imtiaz Shakil Siddique

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/.

5 users liked answer #10dislike answer #105
Alf Moh profile pic
Alf Moh

This post describes how to integrate Fontawesome 5 into Angular 6 (Angular 5 and previous versions will also work, but then you have to adjust my writings)

Option 1: Add the css-Files

Pro: Every icon will be included

Contra: Every icon will be included (bigger app size because all fonts are included)

Add the following package:

npm install @fortawesome/fontawesome-free-webfonts

Afterwards add the following lines to your angular.json:

"app": {
....
"styles": [
....
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"
],
...    
}

Option 2: Angular package

Pro: Smaller app size

Contra: You have to include every icon you want to use seperatly

Use the FontAwesome 5 Angular package:

npm install @fortawesome/angular-fontawesome

Just follow their documentation to add the icons. They use the svg-icons, so you only have to add the svgs / icons, you really use.

5 users liked answer #11dislike answer #115
Paul profile pic
Paul

There are many good answers here. But if you tried all of them and still getting squares instead fontawesome icons, check your css rules. In my case I had the following rule:

* {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

And it overrides fontawesome fonts. Just replacing * selector to body solved my problem:

body {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}
4 users liked answer #12dislike answer #124
Commercial Suicide profile pic
Commercial Suicide

After some experimentation I managed to get the following working:

  1. Install with npm:

    npm install font-awesome --save
    
  2. add to angular-cli-build.js file:

    vendorNpmFiles : [
        font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
    ]
    
  3. add to index.html

    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    

The key was to include the font file types in the angular-cli-build.js file

.+(css|css.map|otf|eot|svg|ttf|woff|woff2)

3 users liked answer #13dislike answer #133
Nik profile pic
Nik

Edit: I'm using angular ^4.0.0 and Electron ^1.4.3

If you have issues with ElectronJS or similar and have a sort of 404 error, a possible workaround is to uedit your webpack.config.js, by adding (and by assuming that you have the font-awesome node module installed through npm or in the package.json file):

new CopyWebpackPlugin([
     { from: 'node_modules/font-awesome/fonts', to: 'assets' },
     { from: 'src/assets', to: 'assets' }
]),

Note that the webpack configuration I'm using has src/app/dist as output, and, in dist, an assets folder is created by webpack:

// our angular app
entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/app/app',
},

// Config for our build files
output: {
    path: helpers.root('src/app/dist'),
    filename: '[name].js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
},

So basically, what is currently happening is:

  • Webpack is copying the fonts folder to the dev assets folder.
  • Webpack is copying the dev assets folder to the dist assets folder

Now, when the build process will be finished, the application will need to look for the .scss file and the folder containing the icons, resolving them properly. To resolve them, I've used this in my webpack config:

// support for fonts
{
    test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
    loader: 'file-loader?name=dist/[name]-[hash].[ext]'
},

Finally, in the .scss file, I'm importing the font-awesome .scss and defining the path of the fonts, which is, again, dist/assets/font-awesome/fonts. The path is dist because in my webpack.config the output.path is set as helpers.root('src/app/dist');

So, in app.scss:

$fa-font-path: "dist/assets/font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";

Note that, in this way, it will define the font path (used later in the .scss file) and import the .scss file using ~font-awesome to resolve the font-awesome path in node_modules.

This is quite tricky, but it's the only way I've found to get around the 404 error issue with Electron.js

2 users liked answer #14dislike answer #142
briosheje profile pic
briosheje

Starting from https://github.com/AngularClass/angular-starter, after having tested a lot of different configuration combination, here is what I did to get it working with AoT.

As already said many times, in my app.component.scss:

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

Then in webpack.config.js (actually webpack.commong.js in the starter pack) :

In the plugins section:

new CopyWebpackPlugin([
    { from: 'src/assets', to: 'assets' },
    { from: 'src/meta'},
    { from: 'node_modules/font-awesome/fonts', to: 'assets/fonts/' }
]),

In the rules section:

,
{
    test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
    use: 'file-loader?name=/assets/fonts/[name].[ext]'
}
2 users liked answer #15dislike answer #152
user3582315 profile pic
user3582315

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>
2 users liked answer #16dislike answer #162
Post Impatica profile pic
Post Impatica

Font Awesome gives you scalablevector icons that can instantly be customized—size, color, drop shadow, and anything that can be done with the power of CSS.

Create a new project and navigate into the project.

ng new navaApp
cd navaApp

Install the font-awesome library and add the dependency to package.json.

npm install --save font-awesome

Using CSS

To add Font Awesome CSS icons to your app...

// in angular.json
"build": {
"options": {
"styles": [
  "../node_modules/font-awesome/css/font-awesome.css",
  "src/styles.css"
],
 }
}

Using SASS

Create new project with SASS:

ng new cli-app --style=scss

To use with existing project with CSS:

Rename src/styles.css to src/styles.scss Change angular.json to look for styles.scss instead of css:

// in angular.json
"build": {
"options": {
"styles": [
  "src/styles.scss"
],
}
}

Make sure to change styles.css to styles.scss.

Create an empty file _variables.scss in src/.

Add the following to _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts';

In styles.scss add the following:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';
2 users liked answer #17dislike answer #172
Mojtaba Nava profile pic
Mojtaba Nava

You can use Angular Font Awesome package

npm install --save font-awesome angular-font-awesome

and then import in your module:

import { AngularFontAwesomeModule } from 'angular-font-awesome';
     @NgModule({
       //...
      imports: [
        //...
        AngularFontAwesomeModule
      ],
      //...
    })
    export class AppModule { }

and import the style in angular-cli file:

   "styles": [
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css"
    ],

see more details about the package in npm library:

https://www.npmjs.com/package/angular-font-awesome

and then use it like this:

<i class="fa fa-coffee"></i>

2 users liked answer #18dislike answer #182
Shmulik profile pic
Shmulik

To use Font Awesome 5 in your Angular project, insert the code below in the of the src/index.html file.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

Good luck!

2 users liked answer #19dislike answer #192
Cherma Ramalho profile pic
Cherma Ramalho

Using LESS (not SCSS) and Angular 2.4.0 and standard Webpack (not Angular CLI, the following worked for me:

npm install --save font-awesome

and (in my app.component.less):

@import "~font-awesome/less/font-awesome.less";

and of course you may need this obvious and highly intuitive snippet (in module.loaders in webpack.conf)

        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
            loader: 'file?name=graphics/[name].[ext]'
        },

The loader is there to fix webpack errors of the kind

"Module parse failed: \node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)" 

and the regexp matches those svg-references (with or without version specification). Depending on your webpack setup you might not need it or you may need something else.

1 users liked answer #20dislike answer #201
dpnmn profile pic
dpnmn

Add it in your package.json as "devDependencies" font-awesome : "version number"

Go to Command Prompt type npm command which you configured.

1 users liked answer #21dislike answer #211
user1349544 profile pic
user1349544

I wanted to use Font Awesome 5+ and most answers focus on older versions

For the new Font Awesome 5+ the angular project hasn't been released yet, so if you want to make use of the examples mentioned on the font awesome website atm you need to use a work around. (especially the fas, far classes instead of the fa class)

I've just imported the cdn to Font Awesome 5 in my styles.css. Just added this in case it helps someone find the answer quicker than I did :-)

Code in Style.css

@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";
1 users liked answer #22dislike answer #221
Ferdi Tolenaar profile pic
Ferdi Tolenaar

If for some reason you cant install package throw npm. You can always edit index.html and add font awesome CSS in the head. And then just used it in the project.

1 users liked answer #23dislike answer #231
Semir Hodzic profile pic
Semir Hodzic

For webpack2 use:

{
 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
                    loader: "file-loader"
}

instead of file-loader?name=/assets/fonts/[name].[ext]

1 users liked answer #24dislike answer #241
aristotll profile pic
aristotll

For Angular 9 using ng :

ng add @fortawesome/angular-fontawesome@0.6.x

Look Here For More Information

1 users liked answer #25dislike answer #251
M Fuat profile pic
M Fuat

Now there is few ways to install fontAwesome on Angular CLI:

ng add @fortawesome/angular-fontawesome

OR using yarn

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/angular-fontawesome

OR Using NPM

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome

Reference here: https://github.com/FortAwesome/angular-fontawesome

1 users liked answer #26dislike answer #261
Archil Labadze profile pic
Archil Labadze

In Angular 11

npm install @fortawesome/angular-fontawesome --save
npm install @fortawesome/fontawesome-svg-core --save
npm install @fortawesome/free-solid-svg-icons --save

And then in app.module.ts at imports array

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

  imports: [
    BrowserModule,
    FontAwesomeModule
  ],

And then in any.component.ts

turningGearIcon = faCogs;

And then any.component.html

<fa-icon [icon]="turningGearIcon"></fa-icon>
1 users liked answer #27dislike answer #271
Malik Haseeb profile pic
Malik Haseeb

If you want to use free version of font awesome - bootstrap, use this :

npm install --save @fortawesome/fontawesome-free

If you are building angular project, you also need to add these imports in your angular.json :

"styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/@fortawesome/fontawesome-free/js/all.js"
        ]
1 users liked answer #28dislike answer #281
ASK profile pic
ASK

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).