Font Awesome 5 con Angular

Solución:

Tienes dos opciones:

---

1. Utilice la biblioteca angular-fontawesome

Simplemente siga las instrucciones en su página de github.

---

2. Utilice fontawesome 5 directamente

Asegúrese de haber instalado todos los paquetes npm relevantes.
Para paquetes Pro, mira esto.

1. Importar iconos relevantes:

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

2. Agregue los íconos a fontawesome Biblioteca en alcance global (no dentro del constructor del componente):

   fontawesome.library.add(faChevronLeft, faChevronRight);
   

3. Úselo en html:

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

4. Cuidado con los prefijos en html:

   • fas por fontawesome-free-solid iconos (también funciona con fa)

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

   • fab por fontawesome-free-brands iconos

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

   • far por fontawesome-free-regular iconos

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

   • fal por fontawesome-free-light iconos (pro)

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

Nota IMPORTANTE:

Está bien usar variables para definir fontawesome clases tan pronto como se haga solo una vez (en la inicialización). Sin embargo, si la variable cambia su valor, no se reflejará en html. Considere este ejemplo:

<span class="fas fa-chevron-{{direction}}"></span>

Esto pondrá el icono correcto en el momento de la inicialización, pero si la dirección cambia después, no se reflejará.
La razón de esto es que fontawesome 5 reemplaza los elementos clasificados con fa ... con apropiado svg y una vez que se reemplaza, ninguna variable afecta esto.
Si desea que el html anterior refleje los cambios en el tiempo de ejecución, debe cambiarlo así:

<span *ngIf="direction==='right'"><span class="fas fa-chevron-right"></span></span>
<span *ngIf="direction==='left'"><span class="fas fa-chevron-left"></span></span>

El exterior span es necesario como el interior span es reemplazado por svg entonces no puedes poner *ngIf en eso.

Otras lecturas:

• Utilice fontawesome 5 con node.js
• API FontAwesome

La forma más sencilla es instalarlo a través de npm y luego importar los estilos:

1)

npm i @fortawesome/fontawesome-free --save

2) Importe los estilos en angular.json

"styles": [
  ...
  "node_modules/@fortawesome/fontawesome-free/css/all.css"
  ...
]

Y luego puedes usarlo tal como está en su documentación.

<i class="fas fa-address-card"></i>

Estoy usando Font Awesome 5 en Angular

Este es el código HTML

<fa-icon [icon]="isFavorite ? ['fas','star'] : ['far','star']" (click)="onClick()"> Star </fa-icon>

Este es mi componente

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

---

---

Utiliza Nuestro Buscador