Police Awesome 5 avec Angular

Question

Comment utiliser font-awesome 5 avec Angular (2+)?

J'ai essayé d'ajouter ceci à l'intérieur d'un composant:

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

puis en HTML:

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

Mais cela me donne un point d'interrogation clignotant dans un cercle.

Answer 1

Vous avez deux options:

---

1. Utilisation angulaires-fontawesome bibliothèque

Il suffit de suivre les instructions sur leur page github.

---

2. Utilisation fontawesome 5 directement

Assurez-vous que vous avez installé tous les packages npm.
Pour les forfaits Pro découvrez cette.

1. Importation pertinents icônes:

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

2. Ajoutez les icônes à fontawesome bibliothèque dans la portée globale (pas à l'intérieur de la composante du constructeur):

   fontawesome.library.add(faChevronLeft, faChevronRight);
   

3. L'utiliser dans le html:

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

4. L'esprit les préfixes dans le html:

   • fas pour fontawesome-free-solid icônes (fonctionne aussi avec fa)

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

   • fab pour fontawesome-free-brands icônes

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

   • far pour fontawesome-free-regular icônes

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

   • fal pour fontawesome-free-light icônes (pro)

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

Remarque importante:

C'est bien d'utiliser des variables pour définir fontawesome classes dès que c'est fait en une seule fois (lors de l'initialisation). Toutefois, si la modification de la variable sa valeur, il ne sera pas reflétée dans le html. Considérons cet exemple:

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

Cela permettra de mettre l'icône de droite lors de l'initialisation de temps, mais si les changements de direction par la suite, il ne sera pas pris en compte.
La raison pour cela est qu' fontawesome 5 remplace les éléments classés par fa ... appropriés svg et une fois qu'il est remplacé aucune variable affecte ce.
Si vous souhaitez que le html ci-dessus afin de refléter les changements d'exécution, vous devez le modifier comme ceci:

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

L'extérieur span est nécessaire, comme l'intérieur des span est remplacé par svg de sorte que vous ne pouvez pas mettre *ngIf sur il.

Lectures complémentaires:

• Utilisation fontawesome 5 avec node.js
• FontAwesome API

Answer 2

Le moyen le plus simple consiste à l'installer via npm, puis à importer les styles:

1)

 npm i @fortawesome/fontawesome-free --save
 

2) Importez les styles dans angular.json

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

Et ensuite, vous pouvez l'utiliser tel quel dans leur documentation

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

Answer 3

J'utilise Font Awesome 5 dans Angular

C'est du code HTML

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

Ceci est ma composante

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