web-dev-qa-db-fra.com

Utilisez une police géniale 5 sur un matériau angulaire 7

J'utilise un matériau angulaire 7.0.1 et un matériau angulaire 7.0.2, je souhaite ajouter les icônes 5.4.2 de la police impressionnante et j'essaie de suivre les étapes sur le site Web fontawesome, mais je ne parviens pas à obtenir la police de caractères police awesome.

premier:

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

puis dans styles.scss ajouter:

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';

et dans _variables.scss ajouter:

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';

maintenant dans app.component.ts ajouter:

import { MatIconRegistry } from "@angular/material";

[...]

constructor(
    public matIconRegistry: MatIconRegistry,
  ) {
    matIconRegistry.registerFontClassAlias ('fas');  // tried with 'fas' and with 'fa'
  }

et enfin je suis censé imprimer les superbes icônes de police avec:

<mat-icon mat-list-icon fontIcon="fas github"></mat-icon>  // tryed also with 'fas-github', 'fasGithub', 'github', 'fa-github', 'fa github' and 'faGithub'

Mais la police icon awesome n'est jamais imprimée. Il me manque quelque chose d’important et d’évident, mais pour l’instant je ne le vois pas.

font-awesome-5icon-fontsangular7angular-material-7
2
Alex

C'est ce que j'ai fait et cela fonctionne pour moi:

Dans mes styles.scss j'ai

@import "~@fortawesome/fontawesome-free/css/all.css";

Ensuite j'ai

<mat-icon fontSet="fa" fontIcon="fa-clipboard-check"></mat-icon>

Avec scss cela ne fonctionnait pas pour moi non plus.

2
Gabb1995

Si vous utilisez scss, vous pouvez simplement importer des styles dans votre vendor.scss:

$fa-font-path: "~@fontawesome/fontawesome-free/webfonts";
@import "~@fontawesome/fontawesome-free/scss/fontawesome";
@import "~@fontawesome/fontawesome-free/scss/regular";
@import "~@fontawesome/fontawesome-free/scss/solid";
@import "~@fontawesome/fontawesome-free/scss/brands";

Et utilisez-le normalement:

<span class="fab fa-refresh fa-spin fa-github" aria-hidden="true"></spin>

Attention aux espaces de noms, fab pour les marques, fas pour solide, etc.

C'était la meilleure option pour moi.

Ou vous pouvez utiliser angular-fontawesome library.

1
Tim