Install Font Awesome 5 with NPM

For Font Awesome 4.7.0:

It should work by simply doing:

npm install font-awesome --save

And adding:

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

...to your styles.css or styles.scss.

For Font Awesome 5 use the official Font Awesome 5 angular component

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

In your template:

<div style="text-align:center">
  <fa-icon [icon]="faAlignJustify"></fa-icon>
</div>

In your typescript:

import { faAlignJustify } from '@fortawesome/free-solid-svg-icons';

export class MyComponent {
  faAlignJustify = faAlignJustify;
}

In the module of your component:

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

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
  ]
})
export class MyModule { }

Alternatively, you can install fontawesome as a module in your js code.

Steps:

  1. npm install @fortawesome/fontawesome-free --save
  2. in your javascript code import the all.js file as instructed at the very bottom of the instructions here.
import '@fortawesome/fontawesome-free/js/all.js';

- or -

require('@fortawesome/fontawesome-free/js/all.js');

If you are using npm install --save @fortawesome/fontawesome-free change the package.json to refer 

import "@fortawesome/fontawesome-free/css/all.css";

For version 5, you need following package @fortawesome/fontawesome. See installation using package managers.

Using npm:

npm install --save @fortawesome/fontawesome-free

Then reference either the all.css or all.js in the <head>.

<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">

Note: Make sure the path is right, depends on where you installed the package from.

OR you can import the module in your js code.

import '@fortawesome/fontawesome-free/js/all.js';

OR if you are using Sass, you can import the module in app.scss.

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/<type>';

Note: Replace <type> with solid, brands or regular whatever type of icons you need.

Font Awesome has an official Angular component.

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-<type>-svg-icons
npm install --save @fortawesome/angular-fontawesome

Note: Replace <type> with solid, brands or regular whatever type of icons you need.

You can also install Vue and React components.

npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/react-fontawesome

Tags:

Font Awesome

Angular

Font Awesome 5

Recent Posts