Detaillierte Erklärung der Angular+Font-Awesome-Schritte

Dieses Mal werde ich Ihnen die Schritte von Angular+Font-Awesome ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Angular+Font-Awesome?

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: Am Ende der Seite wird auf eine Datei „font-awesome.min.css“ verwiesen. und verwendet es dann auf der Seite <i class="fa xxx"></i> Platzieren von Symbolen – Dies ist in Angular immer noch möglich, aber nicht in 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 die Optionen „normal“ und „leicht“:

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

Importieren Sie den Basisstil in app.Modul .ts-Modul

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

Nach dem Import ist es nicht erforderlich, 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 das HTML-Tag Attribut 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>

翻转:

<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>

尺寸:

<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>

按角度偏转:

<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>

靠左或靠右排列:

<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>

总结

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue组件实现简单弹窗功能案例详解

swiper操作图片步骤详解

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Angular+Font-Awesome-Schritte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!