6

I don't know how to include FontAwesome 5 to Angular 2+ app. I found this package - https://www.npmjs.com/package/@fortawesome/fontawesome Could you tell me where should I import this package? Maybe in app.module.ts file?

Makla
  • 9,899
  • 16
  • 72
  • 142
bartekgorski
  • 124
  • 2
  • 7
  • https://github.com/angular/angular-cli/wiki/stories-include-font-awesome – JB Nizet Feb 21 '18 at 21:38
  • Can you confirm if that works with font awrsome v5.x.x? – Jota.Toledo Feb 21 '18 at 21:58
  • @j3hyde had mentioned that how to [add FontAwesome using CSS](https://stackoverflow.com/questions/48184079/include-fortawesome-fontawesome-to-angular-cli-project#answer-48192503) with Angular. – MD Moinur Rahman Khan Feb 25 '18 at 21:11
  • Possible duplicate of [Font Awesome 5 with Angular](https://stackoverflow.com/questions/48027322/font-awesome-5-with-angular) – JeB Apr 08 '18 at 13:41

2 Answers2

12

First: you need to install the packages:

$ npm i --save @fortawesome/fontawesome

$ npm i --save @fortawesome/fontawesome-free-solid
$ npm i --save @fortawesome/fontawesome-free-regular
$ npm i --save @fortawesome/fontawesome-free-brands

Then in your app.component.ts you add the imports:

import fontawesome from '@fortawesome/fontawesome';
import faTrashAlt from '@fortawesome/fontawesome-free-regular/';

and in your constuctor of the app.component you add the icon to the fontawesome library: 

fontawesome.library.add(faTrashAlt);

In the html page you just add the icon:

<i class="far fa-trash-alt"></i>

Link to fontawesome documentation: https://fontawesome.com/how-to-use/use-with-node-js#free

Miss_K
  • 194
  • 2
  • 5
0

you need to install the package:

npm install @fortawesome/fontawesome-free

then import all

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

or import separately, like that:

import "@fortawesome/fontawesome-free/css/fontawesome.css";
import "@fortawesome/fontawesome-free/css/solid.css";
het
  • 781
  • 9
  • 16