Install Font Awesome 5 with NPM
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-corenpm install --save @fortawesome/free-<type>-svg-iconsnpm 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-fontawesomenpm install --save @fortawesome/react-fontawesome
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-corenpm add @fortawesome/free-solid-svg-iconsnpm 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 { }
If you are using npm install --save @fortawesome/fontawesome-free
change the package.json
to refer
import "@fortawesome/fontawesome-free/css/all.css";