solid - install font awesome angular 6

Fuente Awesome 5 con Angular

Question

¿Cómo uso font-awesome 5 con Angular (2+)?

He intentado agregar esto dentro de un componente:

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

y luego en HTML:

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

Pero esto me da un signo de interrogación parpadeante en un círculo.

Answer 1

Tienes dos opciones:

1. Utilice la biblioteca angular-fontawesome

Sólo github.com/FortAwesome/angular-fontawesome seguir las instrucciones en su github.com/FortAwesome/angular-fontawesome .

2. Utilice fontawesome 5 directamente

Asegúrese de que ha instalado todos los paquetes npm relevantes.
Para los paquetes Pro echa un vistazo a this .

1. Importar iconos relevantes:

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

2. Agregue los íconos a la biblioteca fontawesome en el ámbito global (no dentro del constructor del componente):

   fontawesome.library.add(faChevronLeft, faChevronRight);

3. Utilízalo 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 para los fontawesome-free-solid de fontawesome-free-solid de fontawesome-free-solid (también funciona con fa )

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

   • fab para iconos de fontawesome-free-brands

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

   • far de fontawesome-free-regular iconos fontawesome-free-regular

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

   • fal para iconos de fontawesome-free-light (pro)

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

Nota IMPORTANTE:

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

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

Esto colocará 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 svg apropiado 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 span externo es necesario, ya que el span interno se reemplaza con svg por lo que no puede poner *ngIf .

Lectura adicional :

• Utilice fontawesome 5 con node.js
• API de FontAwesome

Answer 2

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