Schriftart Super 5 mit Angular

12

Wie verwende ich font-awesome 5 mit Angular (2 +)?

Ich habe versucht, dies in einer Komponente hinzuzufügen:

%Vor%

und dann in HTML:

%Vor%

Aber das gibt mir ein blinkendes Fragezeichen in einem Kreis.

    
meltedspark 29.12.2017, 19:13
quelle

1 Antwort

21

Vergewissern Sie sich, dass Sie alle relevanten npm-Pakete installiert haben.

Bis angular-fontawesome ist produktionsfertig und in npm :

veröffentlicht

  1. Relevante Symbole importieren:

    %Vor%

  2. Fügen Sie die Symbole zu fontawesome library im globalen Bereich hinzu (nicht im Konstruktor der Komponente):

    %Vor%

  3. Benutze es in html:

    %Vor%

  4. Beachten Sie die Präfixe in html:

    • fas für fontawesome-free-solid icons (funktioniert auch mit fa )

      %Vor%

    • fab für fontawesome-free-brands Symbole

      %Vor%

    • far für fontawesome-free-regular Symbole

      %Vor%

    • fal für fontawesome-free-light Symbole (pro)

      %Vor%

Wichtiger Hinweis:

Es ist in Ordnung, Variablen zu verwenden, um fontawesome -Klassen zu definieren, sobald sie nur einmal (bei der Initialisierung) ausgeführt werden. Wenn die Variable jedoch ihren Wert ändert, wird sie nicht in HTML wiedergegeben. Betrachten Sie dieses Beispiel:

%Vor%

Dies bringt das richtige Icon zur Initialisierungszeit, aber wenn sich die Richtung danach ändert, wird es nicht reflektiert.
Der Grund hierfür ist, dass fontawesome 5 die Elemente ersetzt, die mit fa ... mit der entsprechenden svg klassifiziert sind, und sobald sie ersetzt wird, beeinflusst keine Variable dies.
Wenn das obige HTML Laufzeitänderungen widerspiegeln soll, müssen Sie es wie folgt ändern:

%Vor%

Der äußere span ist notwendig, da der innere span durch svg ersetzt wird, so dass Sie *ngIf nicht darauf setzen können.

    
meltedspark 29.12.2017, 19:24
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Ersetzen Sie die Schleife mit einer der Funktionen der "apply" -Familie