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

I'm using Angular 2 (final release) and Angular CLI.How do I add font-awesome to my project?

I'm using Angular 2 (final release) 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 changed - you do't have 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 then add font-awesome references to them, 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!?
                 ],
                 ...
             }
           ]
    
    ],
  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. run ng build and ng serve again - because the watchers are only for the src folder and angular-cli.json is not observed for changes.

  5. enjoy your awesome icons!

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

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)

Install from NPM and save to your package.json

npm install --save font-awesome

If using CSS

Insert into your style.css

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

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(mdIconRegistry: MdIconRegistry) {
    mdIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

In any template file you can now do

<md-icon fontSet="fontawesome" fontIcon="fa-area-chart"></md-icon>

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

    @import '~font-awesome/scss/font-awesome';

    • Someone in the comment said you might have to add this as well if you are using scss: $fa-font-path: "../node_modules/font-awesome/fonts"; in styles.scss

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

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)

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

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.

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

Translating... 0%