So öffnen Sie Font-Awesome mit Angular

Dieses Mal zeige ich Ihnen, wie Sie Angular zum Öffnen von Font-Awesome verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Angular zum Öffnen von Font-Awesome gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Vorwort

Dieser Artikel stellt Ihnen hauptsächlich den relevanten Inhalt zum Öffnen von Font-Awesome in Winkelhaltung vor und teilt ihn als Referenz und Lernen, im Folgenden gibt es nicht viel zu sagen, werfen wir einen Blick auf die ausführliche Einführung.

Umgebung

• Angular: v5.2.9

• Schriftart- Großartig: v5.0.10

• angular-fontawesome: v0.1.0-9

Keine Notwendigkeit, traditionelles Web zu verwenden Schriftartenmethode

Früher war ich an die traditionelle Methode von Font-Awesome gewöhnt: Sehen Sie sich eine Datei „font-awesome.min.css“ unten auf der Seite an und verwenden Sie dann <i class="fa xxx"></i> um das Symbol auf der Seite zu platzieren – das ist in Angular immer noch möglich, aber es ist nicht Angularish – wir können es tatsächlich mit Angular-Modulkomponenten tun. Zum Zeitpunkt des Schreibens dieses Artikels wurde Package for Angular noch nicht offiziell auf der offiziellen Website veröffentlicht, es gibt jedoch bereits relevante Dokumentations-Tutorials auf dem offiziellen GitHub. Der folgende Inhalt dieses Artikels folgt im Wesentlichen der offiziellen Dokumentation.

Paket installieren

　npm-Methode:

$ npm install @fortawesome/fontawesome-svg-core --save
$ npm install @fortawesome/free-solid-svg-icons --save
$ npm install @fortawesome/angular-fontawesome --save

wobei „free-solid-svg- „icons“ ist ein klassischer Stil, und es gibt „normale“ und „leichte“ Optionen:

$ npm install @fortawesome/free-brands-svg-icons --save
$ npm install @fortawesome/free-regular-svg-icons --save

Importieren Sie das Basismodul in app.module.ts

// ...
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
 // ...
 imports: [
 // ...
 FontAwesomeModule
 ],
 // ...
})
// ...

Importieren Dann ist es nicht notwendig, es wiederholt in andere Komponenten zu importieren. Dies ist die Grundlage für die folgenden Verwendungsmöglichkeiten von Symbolen.

On-Demand-Verwendungsmethode 1

Importieren Sie die Symbole, die Sie benötigen, in die Komponente:

// ...
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
//...
export class AppComponent {
 //...
 myIcon = faCoffee;
}

Hinweis: Dem Namen des hier importierten Symbols muss fa vorangestellt werden und die CamelCase-Nomenklatur verwendet werden. Nach dem Import können Sie das Symbol in der HTML-Vorlage wie folgt verwenden:

<fa-icon [icon]="myIcon"></fa-icon>

Beachten Sie, dass der Symbolname direkt in der HTML-Vorlage verwendet werden muss. Symbole finden Sie in der offiziellen Symbolbibliothek der Website.

On-Demand-Nutzungsmethode zwei

Die zweite On-Demand-Nutzungsmethode ist die Verwendung der Bibliothek. Nach der Verwendung der Bibliothek müssen Sie keine Symbole mehr importieren die Komponente, alles. Alles wird in app.module.ts erledigt:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';

Nachdem Sie die Bibliothek haben, fügen Sie die benötigten Symbole hinzu:

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

Dann fügen Sie die Symbole zur Bibliothek hinzu:

// import ...
library.add(faCoffee);
// NgModule({...

Auf diese Weise können Sie es direkt in HTML-Vorlagen verwenden.

Den vollständigen Satz importieren

Für eine Website mittlerer Größe empfehle ich dennoch, alle Symbole zu importieren und alles zu verwenden, was Sie möchten. Dies ist bequemer als die Suche nach Namen hinzufügen und einzeln importieren. Die vollständige Importmethode besteht darin, den Symbolnamen durch den Alias ​​des Symbolpakets zu ersetzen:

// Single:
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
// All:
import { fas } from '@fortawesome/free-solid-svg-icons';

Das „s“ von „fas“ stellt den „solid“ von „free-solid-svg-icons“ dar. Analog dazu lautet der Import anderer Stile:

import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

und fügen Sie ihn dann einfach in die Bibliothek ein:

library.add(fas);
// or
library.add(fas, far);

Nach dem Hinzufügen können Sie die Symbole beliebig in HTML verwenden.

ist in der HTML-Vorlage geschrieben

Die vorherige Art:

<fa-icon [icon]="coffee"></fa-icon>
// or
<fa-icon icon="coffee"></fa-icon>

ist eigentlich eine einfache Schreibweise. Standardmäßig wird das Stilsymbol „fas“ verwendet. Wenn Sie „far“ oder „fab“ möchten, müssen Sie Folgendes schreiben:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]"></fa-icon>

Geben Sie den Alias ​​des Stilpakets als Präfix in das erste Element des Arrays ein. Ich empfehle diese präzise Schreibweise.

Grundlegende Symbol-Spezialeffekte

Font-Awesome verfügt auch über viele tolle Symbol-Spezialeffekte, die über HTML-Tag-Attribute erreicht werden können. Hier sind einige grundlegende Verwendungen, die direkt aus dem Dokument kopiert wurden:

Rotation und Impulsrotation:

<fa-icon [icon]="[&#39;fas&#39;, &#39;spinner&#39;]" [spin]="true"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;spinner&#39;]" [pulse]="true"></fa-icon>

Feste Breite:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" [fixedWidth]="true"></fa-icon>

Rand:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" [border]="true"></fa-icon>

Flip:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" flip="horizontal"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" flip="vertical"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" flip="both"></fa-icon>

Größe:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" size="xs"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" size="lg"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" size="6x"></fa-icon>

Ablenkung nach Winkel:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" rotate="90"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" rotate="180"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" rotate="270"></fa-icon>

Links oder rechts anordnen:

<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" pull="left"></fa-icon>
<fa-icon [icon]="[&#39;fas&#39;, &#39;coffee&#39;]" pull="right"></fa-icon>

Ich glaube, Sie haben es gemeistert, nachdem Sie den Fall gelesen haben Diese Artikelmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie vue+webpack, um ein Projekt (mit Code) zu erstellen

So bedienen Sie die Datenbindung von vue.js

Das obige ist der detaillierte Inhalt vonSo öffnen Sie Font-Awesome mit Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!