Install Font Awesome 5 with NPM

Question

I am working with Angular(6) application, and I am trying to use FA icons, and drop-down with no luck. I am successfully using FA(4) icons, like:

<i class="fa fa-align-justify"></i>

But <i class="fas fa-align-justify"></i> is not working. I am using following command to install FA:

npm install font-awesome --save

This is from package.json in node_modules folder:

I can see font-awesome.css, but it says Font Awesome 4.7.0 as shown below:

In angular.json file, I referenced FA: "node_modules/font-awesome/css/font-awesome.min.css",

I read a lot of posts like How to use font Awesome 5 installed via NPM

What do I need to do else?

itsmysterybox · Accepted Answer · 2020-08-18T02:40:02.010

97

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

edited Aug 18 '20 at 02:40

answered Sep 22 '18 at 11:01

itsmysterybox

2,748
3
21
26

1

i just ran the command `npm install @fortawesome/fontawesome-free`, still under `node_modules` > `font-awesome.css` showing the version `4.7.` i tried to delete the folder before i ran `npm install @fortawesome/fontawesome-free`, and the icon ` ` is not showing – E.Meir Sep 22 '18 at 14:54
if i use the CDN suggested [here](https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css) the icon is showing, but i really dont want to use it like that and prefer to use package manager. – E.Meir Sep 22 '18 at 15:00
It's showing 5.3.1 in my case.. What folders are being shown to you? When I downloaded, I got this stucture: "node_modules\@fortawesome\fontawesome-free\css". And in css folder, when I open fontawesome.css file, it shows 5.3.1 in it. – itsmysterybox Sep 22 '18 at 15:08
1

Thanks, found the problem, and i have no clue why it is working like this, after runing the command `npm install @fortawesome/fontawesome-free` in `node_modules` these 2 folders are getting copied 1- `font-awesome` it's version 4.7.0,and also 2- `@fortawesome` version 5.3.1. why do you think that it happens? maybe i have an old dependency – E.Meir Sep 22 '18 at 15:19
2

just checked, and i have an old dependency for the version 4.7.0, so i referenced it by mistake :/ it was showed under `devDependencies` in `pckages.json` – E.Meir Sep 22 '18 at 15:20
1

I guess it would have made too much sense to PLAINLY state this fact on their website, +1! – Scott Weaver Jun 10 '19 at 23:43

score 16 · Answer 2 · edited Mar 09 '20 at 14:35

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 { }

CharithU · Answer 3 · 2020-05-26T05:06:42.573

12

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

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

edited May 26 '20 at 05:06

answered May 25 '20 at 10:27

CharithU

121
1
3

BruceJo · Answer 4 · 2020-07-18T15:28:20.433

5

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

Steps:

npm install @fortawesome/fontawesome-free --save
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');

edited Jul 18 '20 at 15:28

answered May 28 '20 at 16:02

BruceJo

591
6
17

score 2 · Answer 5 · edited Jul 06 '20 at 09:05

A stumbling block for me was the final part of their installation docs. It says to reference the all.css file in your head tag.

I did it incorrectly.

The right way to link to this is the following:

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

Hope this helps!

This should get it working for you. Also, I would recommend reinstalling the latest version of the npm package using the FontAwesome guide

Install Font Awesome 5 with NPM

5 Answers5

Linked