CODEWITHSUNDEEP
angularfont-awesomefont-awesome-5angular-fontawesome
JeB
JeB

Reputation: 12133

Font Awesome 5 with Angular

How do I use font-awesome 5 with Angular (2+)?

I've tried adding this inside a component:

import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
...
constructor(){
   fontawesome.library.add(faChevronLeft, faChevronRight);
}

and then in HTML:

<span class="fa" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>

But this gives me a blinking question mark in a circle.

Upvotes: 56

Views: 80042

Answers (4)

Tuyen Tran
Tuyen Tran

Reputation: 11

Another way to render FontAwesome 5 in Angular using either WebFont or SVG:

https://www.npmjs.com/package/@ui4ngx/fontawesome

Demo

This uses HTML templates instead of Javascript rendering It provides the same features as angular-fontawesome library does

For older version (v4), you can use this

https://www.npmjs.com/package/@ui4ngx/fontawesome4

Demo

Upvotes: 0

Dino
Dino

Reputation: 8292

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>

Upvotes: 48

Meisam Mofidi
Meisam Mofidi

Reputation: 161

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;    
  }
}
`

Upvotes: 4

JeB
JeB

Reputation: 12133

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.

  1. Import relevant icons:

    import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';

  2. Add the icons to fontawesome library in global scope (not inside the component's constructor): 

    fontawesome.library.add(faChevronLeft, faChevronRight);

  3. Use it in html:

    <span class="fas" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>

  4. Mind the prefixes in html:

    • fas for fontawesome-free-solid icons (works also with fa)

      <span class="fas fa-chevron-left"></span>

    • fab for fontawesome-free-brands icons

      <span class="fab fa-bitcoin"></span>

    • far for fontawesome-free-regular icons

      <span class="far fa-chevron-left"></span>

    • fal for fontawesome-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:

Upvotes: 80

Related Questions