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>
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
1import { library } from '@fortawesome/fontawesome-svg-core';
2import { fas } from '@fortawesome/free-solid-svg-icons';
3import { far } from '@fortawesome/free-regular-svg-icons';
4library.add(fas, far);
5