Font Awesome 5 with Angular
The simplest way is to install it through npm and then import the styles:
1)
npm i @fortawesome/fontawesome-free --save
2) Import the styles in angular.json
"styles": [
...
"node_modules/@fortawesome/fontawesome-free/css/all.css"
...
]
And then you can use it as it is in their documentation
<i class="fas fa-address-card"></i>
You have two options:
1. Use angular-fontawesome library
Just follow the instructions on their github page.
2. Use fontawesome 5 directly
Make sure you have installed all the relevant npm packages.
For Pro packages check out this.
Import relevant icons:
import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid'; import fontawesome from '@fortawesome/fontawesome';
Add the icons to
fontawesome
library in global scope (not inside the component's constructor):fontawesome.library.add(faChevronLeft, faChevronRight);
Use it in html:
<span class="fas" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>
Mind the prefixes in html:
fas
forfontawesome-free-solid
icons (works also withfa
)<span class="fas fa-chevron-left"></span>
fab
forfontawesome-free-brands
icons<span class="fab fa-bitcoin"></span>
far
forfontawesome-free-regular
icons<span class="far fa-chevron-left"></span>
fal
forfontawesome-free-light
icons (pro)<span class="fal fa-chevron-left"></span>
Important note:
It's fine to use variables to define fontawesome
classes as soon as it is done only once (at initialization). However, if the variable changes its value it won't be reflected in html.
Consider this example:
<span class="fas fa-chevron-{{direction}}"></span>
This will put the right icon at the initialization time, but if the direction changes afterwards it won't be reflected.
The reason for this is that fontawesome 5
replaces the elements classed with fa ...
with appropriate svg
and once it is replaced no variable affects this.
If you want the above html to reflect runtime changes you have to change it like this:
<span *ngIf="direction==='right'"><span class="fas fa-chevron-right"></span></span>
<span *ngIf="direction==='left'"><span class="fas fa-chevron-left"></span></span>
The outer span
is necessary as the inner span
is replaced with svg
so you can't put *ngIf
on it.
Further reading:
- Use fontawesome 5 with node.js
- FontAwesome API
I am using Font Awesome 5 in Angular
This is HTML code
<fa-icon [icon]="isFavorite ? ['fas','star'] : ['far','star']" (click)="onClick()"> Star </fa-icon>
This is my Component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'favorite',
templateUrl: './favorite.component.html',
styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {
isFavorite: boolean;
prefix:string;
constructor() { }
ngOnInit() { }
onClick(){
this.isFavorite = !this.isFavorite;
}
}
`