web-dev-qa-db-fra.com

Police Awesome 5 avec Angular

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.

angularfont-awesomefont-awesome-5angular-fontawesome
28
meltedspark

Vous avez deux options:

1. Utilisez la bibliothèque angular-fontawesome

Il suffit de suivre les instructions sur la page github . 

2. Utilisez directement fontawesome 5

Assurez-vous d’avoir installé tous les packages npm appropriés .
Pour les packages Pro, consultez this .

  1. Importer les icônes pertinentes:

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

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

    fontawesome.library.add(faChevronLeft, faChevronRight);

  3. Utilisez-le en HTML:

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

  4. Attention aux préfixes en HTML:

    • fas pour les icônes fontawesome-free-solid (fonctionne également 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>

Note importante: 

C'est bien d'utiliser des variables pour définir les classes fontawesome dès que cela n'est fait qu'une fois (à l'initialisation). Cependant, si la variable change de valeur, elle ne sera pas reflétée en html . Considérons cet exemple:

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

Cela mettra l'icône de droite au moment de l'initialisation, mais si la direction change par la suite, elle ne sera pas reflétée.
La raison en est que fontawesome 5 remplace les éléments classés par fa ... par la variable svg appropriée et qu’une fois remplacée, aucune variable n’affecte cette situation.
Si vous souhaitez que le code HTML ci-dessus reflète les modifications d'exécution, vous devez le modifier comme suit:

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

La variable span extérieure est nécessaire car la variable span intérieure est remplacée par la variable svg, de sorte que vous ne pouvez pas y ajouter *ngIf.

Lectures supplémentaires:

53
meltedspark

J'utilise Font Awesome 5 dans Angular

Ceci est le code HTML  

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

Ceci est mon composant 

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;    
  }
}
`
0
Meisam Mofidi