Comment faire pour enregistrer correctement font-awesome pour le md-icône?

La documentation de md-icône décrit comment utiliser la police-génial en plusieurs parties et suggère que nous pourrions utiliser font-awesome par la suite comme

<md-icon fontSet="fa" fontIcon="alarm"></md-icon>

Mais la documentation est très compliqué et j'ai du mal à trouver une routine pour vous inscrire 3ème police définie comme la police-génial pour la md-icône via Google.

Toute aide est très appréciée!

PS: je sais que la normale <i> façon, généralement cela fonctionne, mais il ne semble pas fonctionner dans certains exemples, où le md-icône est utilisée à l'origine.

InformationsquelleAutor Haoliang Yu | 2017-05-07
  1. 20

    Ajouter de la police génial ca dans votre lien Index.html fichier:

    <link  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    Alors essayez de mettre ce code, Cela fonctionne pour moi:

    <md-icon class="fa fa-clock-o" aria-hidden="true"></md-icon>
<md-icon class="fa fa-bell" aria-hidden="true"></md-icon>
    • C'est étonnamment simple. Merci.
    • Ce n'est pas la bonne façon de s'inscrire font-awesome pour le md-icône. Voir la réponse ci-dessous.
    • Je sais que l'autre est l'angle moyen. C'est trop facile. J'ai dû ajouter .mat-icon.fa { font-family: FontAwesome; } à mon mondial de la feuille de style.
    • accordé ce n'est pas le "angulaire façon" de faire cela, mais connaissez-vous des raisons techniques à l'aide de cette approche ne serait pas approprié? Je suis intéressé de savoir que j'ai utilisé l'approche ci-dessus avant, et je me demande si il n'y a aucun danger/problèmes à l'utiliser?
    • la réponse ci-dessus n'est pas à l'aide de mat-icône. Il s'agit de mettre un tapis d'icône de l'élément sur la page, puis en appliquant une police impressionnant de classe à elle. Il ignore tout de la présentation de la logique qui existe au sein de la mat-les propriétés de l'icône. Je doute qu'il y est une différence entre faire ci-dessus, et tout simplement à l'aide de <i> à la place.
    InformationsquelleAutor AmanDeepSharma
  2. 80

    Dans votre AppModule ajouter:

    import { MatIconModule, MatIconRegistry } from '@angular/material';

    Puis ajouter MatIconModule pour vos importations par exemple:

    imports: [...
   MatIconModule
...]

    Ajouter MatIconRegistry à vos fournisseurs:

    providers: [...
    MatIconRegistry
....]

    Puis ajoutez les lignes suivantes à votre AppModule classe:

    export class AppModule {
    constructor(
        ...public matIconRegistry: MatIconRegistry) {
        matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
    }

    Ensuite, vous pouvez utiliser n'importe où dans votre projet comme suit:

    <mat-icon fontSet="fa" fontIcon="fa-times-circle"></mat-icon>

    Mise à jour

    Vous aurez besoin d'inclure fontawesome dans votre projet quelque part. J'utilise angulaires-cli ainsi, l'ajout de la font-awesome mnp package:

    npm install font-awesome --save

    et en l'incluant dans la liste des styles dans angulaires-cli.fichier json qui fonctionne pour moi:

    "styles": [
    ...
    "../node_modules/font-awesome/scss/font-awesome.scss",
  ],

    Mise à jour 2

    Changé préfixes 'Mat' pour tenir compte des dernières mises à jour angulaire du matériel.

    • Cela ne fonctionne pas pour moi. Je peux cependant utiliser la valeur par défaut <i class="fa fa-icon"> et elle fonctionne correctement. Mais à l'aide de la <mat-icon> ne fonctionne pas pour moi, même après sa mise en place exactement comme vous l'avez décrit.
    • Le processus décrit ci-dessus n'est pas différente de celle décrite ici (sauf pour l'ajout de scss de la bibliothèque à travers les styles de tableau): matériel.angulaire.io/composants/icône/vue d'ensemble. Vous pouvez regarder sur votre travail pour vous assurer que vous avez suivi le processus à fond.
    • Vous pouvez également vous inscrire par défaut le jeu de polices pour éviter de taper fontSet="fa" dans AppModule constructeur de la matIconRegistry.setDefaultFontSetClass('fa');
    • Eh bien, il n'était pas en train de travailler avec la police impressionnant 4. Mais j'ai ajouté dans la nouvelle webfont avec la Police Impressionnant 5 et cela fonctionne.
    • Le AppModule étape n'est pas nécessaire si vous utilisez fontSet="fa". Ajout il vous permet également utiliser l'alias fontSet="fontawesome".
    • matIconRegistry.setDefaultFontSetClass('fa') fonctionnent bien, mais maintenant je suis dans l'impossibilité d'utiliser le matériel d'icônes.

    InformationsquelleAutor SeanStanden
  3. 0

    J'ai configuré https://github.com/FortAwesome/angular-fontawesome#using-the-icon-library

    La façon dont je puis l'utiliser:

    <mat-form-field>
    <input matInput style="width: calc(100% - 20px);/>
    <fa-icon [icon]="['fal', 'home']" size="lg" class="fa-pull-right"></fa-icon>                  
</mat-form-field>
    InformationsquelleAutor Hypenate