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

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>

Answer 2

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!

Answer 3

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";

Answer 4

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.

Answer 5

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';

Answer 6

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]'
}