web-dev-qa-db-fra.com

Police Awesome 5 et Angular 5

J'utilisais le paquet npm font-awesome (qui est la version de Font Awesome 4.7) mais je souhaite mettre à niveau vers Font Awesome 5. J'ai installé les packages suivants:

"@fortawesome/angular-fontawesome": "^0.1.1",
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free-brands": "^5.0.13",
"@fortawesome/fontawesome-free-regular": "^5.0.13",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^1.2.0",
"@fortawesome/free-solid-svg-icons": "^5.1.0",

J'utilisais des icônes comme ceci:

<i class="fa fa-plus"></i>

Avec la nouvelle version, j'ai essayé d'utiliser des icônes comme celle-ci:

<i class="fas fa-sign-out-alt fa-2x"></i>

Mais ça ne fonctionne pas. J'essaie d'ajouter des icônes comme celle-ci:

import {faSignOutAlt} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
fontawesome.library.add(faSignOutAlt);

dans mon app.module.ts et cela fonctionne, mais je ne veux pas importer chaque icône une par une. Existe-t-il un moyen de les utiliser comme je le faisais avec la version précédente? Un moyen de ne pas les importer un par un?

Merci

angularangular5font-awesomefont-awesome-5
4
Valentine

Installer

npm install --save-dev @fortawesome/fontawesome-free

et utiliser dans .angular-cli

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

reference: Utiliser un gestionnaire de paquets

5
Diego Salguero

Oui, vous pouvez les importer et les ajouter tous

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

library.add(fas, far);

Toutefois

Vous pouvez également importer des styles d'icônes entiers. Mais fais attention! Quoi que vous importiez, vous risquez de faire gonfler votre dernier paquet avec des icônes que vous n'utilisez pas.

De plus, puisque vous utilisez angular-fontawesome, utilisez-le ...

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

// Add an icon to the library for convenient access in other components
library.add(faCoffee);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

et en html

<div style="text-align:center">
  <!-- simple name only that assumes the 'fas' prefix -->
  <fa-icon icon="coffee"></fa-icon>
  <!-- ['fas', 'coffee'] is an array that indicates the [prefix, iconName] -->
  <fa-icon [icon]="['fas', 'coffee']"></fa-icon>
</div>

Tout le code extrait de la page d'accueil de la documentation officielle

2
bambam

Vous devez définir l'URL css dans votre index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

Voici un exemple de travail:

Exemple Stackblitz => font-awesome

0
Sanoj_V