font awesome angular

1//install in your project directory
2npm install --save @fortawesome/fontawesome-free
3
4// in angular.json add in the 'build' section the following lines in 'styles' and 'scripts'
5"styles": [
6           "node_modules/@fortawesome/fontawesome-free/css/all.css"
7        ]
8
9"scripts": [
10          "node_modules/@fortawesome/fontawesome-free/js/all.js"
11        ]
12
13//from now on, you can use fontawesome icons through the <i>
14    <i class='fab fa-facebook'></i>

1npm install --save font-awesome angular-font-awesome
2//once installed you will to import font awesome to your app.module.ts
3import { AngularFontAwesomeModule} from 'angular-font-awesome';
4//on your app.module.ts add AngularFontAwesomeModule under imports
5imorts[
6.../
7AngularFontAwesomeModule,
8],
9

1ng add @fortawesome/angular-fontawesome

1ng add @fortawesome/angular-fontawesome@<version>
2
3// 0.1.x	        angular 5.x	not supported
4// 0.2.x	        angular 6.x	not supported
5// 0.3.x	        angular 6.x && 7.x	not supported
6// 0.4.x, 0.5.x	angular 8.x	not supported
7// 0.6.x	        angular 9.x	supported
8// 0.7.x	        angular 10.x	supported
9
10// Usage
11// Typescript
12import { Component } from '@angular/core';
13import { faCoffee } from '@fortawesome/free-solid-svg-icons';
14
15@Component({
16  selector: 'app-root',
17  templateUrl: './app.component.html',
18  styleUrls: ['./app.component.scss']
19})
20export class AppComponent {
21  title = 'font awesome usage';
22  faCoffee = faCoffee;
23}
24
25// In html 
26<fa-icon [icon]="faCoffee"></fa-icon>

1//2021: INSTALL IT IN ANGULAR 1ST
2npm i font-awwsome
3// in angular.json add in the 'build' section the following lines in 'styles' and 'scripts'
4"styles"[
5              "node_modules/@fortawesome/fontawesome-free/css/fontawesome.css"
6]

1"apps": [
2    {
3      "root": "src",
4      "outDir": "dist",
5      ....
6      "styles": [
7          "styles.css",
8          "../node_modules/bootstrap/dist/css/bootstrap.css",
9          "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
10      ],
11      ...
12  }
13  ]
14],
15