So verwenden Sie Font Awesome 5 in Vue-Entwicklungsprojekten

Offizielle Font Awesome-Website: https://fontawesome.com/

Front-End-Freunde kennen alle die Font Awesome-Symbolbibliothek, die eine Fülle häufig verwendeter Symbole enthält. Der Autor verwendet sie häufig bei der Entwicklung, wodurch er sich die Mühe erspart, überall nach Symbolen zu suchen. Natürlich ist Alibabas Iconfont auch gut, aber es ist chaotischer und die gefundenen Symbole stimmen manchmal nicht überein und es gibt einige Abweichungen in Größe und Proportionen. Selbst wenn Sie nur Symbole aus einer bestimmten Symbolbibliothek verwenden, ist es unvermeidlich, dass die Sammlung unvollständig ist (dies ist die Erfahrung des Autors und es besteht absolut nicht die Absicht, Iconfont herabzusetzen. Bitte sprühen Sie nicht). Font Awesome hat im Laufe mehrerer Jahre der Entwicklung die am häufigsten im Internet verwendeten Symbole aufgenommen, was definitiv den Entwicklungsanforderungen der meisten Leute gerecht wird (warum müssen Sie es selbst tun, wenn Sie einen Künstler haben? ! !) Natürlich können Sie anhand des Titels erkennen, dass Font Awesome in die 5. Ära eingetreten ist und die Verwendungsmethode sich auch von den Versionen vor 4 unterscheidet und eine kostenpflichtige Version hinzugefügt wurde. . . Natürlich reicht für jeden die kostenlose Variante! Als Nächstes erkläre ich Ihnen, wie Sie Font Awesome 5 in Ihrem eigenen Vue-Entwicklungsprojekt verwenden.

Abhängigkeiten installieren

1. Installieren Sie grundlegende Abhängigkeiten

$ npm ich --save @fortawesome/fontawesome
$ npm ich --save @fortawesome/vue-fontawesome

2. Installieren Sie Stilabhängigkeiten

$ npm ich --save @fortawesome/fontawesome-free-solid
$ npm ich --save @fortawesome/fontawesome-free-regular
$ npm i --save @fortawesome/fontawesome-free-brands

Beachten:

• Die kostenlose Version unterstützt drei Stile: Solid, Regular und Brands. Bei der späteren Verwendung von Symbolen gibt es je nach Stil unterschiedliche Präfixe.
• Wenn das Herunterladen der Abhängigkeiten fehlschlägt, versuchen Sie es mit cnpm. Ich werde nicht ins Detail gehen!
  

Konfiguration

Geben Sie die Datei main.js ein, um Font Awesome zu konfigurieren. Die Konfigurationsmethode enthält mehr Code als vor 4.

importiere Fontawesome aus „@fortawesome/fontawesome“
importiere FontAwesomeIcon aus „@fortawesome/vue-fontawesome“
Solide aus „@fortawesome/fontawesome-free-solid“ importieren
regulär importieren von '@fortawesome/fontawesome-free-regular'
Marken von „@fortawesome/fontawesome-free-brands“ importieren

fontawesome.library.add(fest)
fontawesome.library.add(regulär)
fontawesome.library.add(Marken)

Vue.component('font-awesome-icon', FontAwesomeIcon)

verwenden

Ok, nachdem die Konfiguration abgeschlossen ist, können Sie Font Awesome in Ihrem Projekt nach Belieben verwenden. Die Verwendung ist wie folgt:

Wir möchten beispielsweise das Symbol „Benutzer“ verwenden:

1. Rufen Sie die Symbolsuchseite auf

Suchadresse: https://fontawesome.com/icons...

2. Geben Sie den englischen Namen des Symbols ein, das Sie verwenden möchten, z. B. Benutzer ist Benutzer

3. Bezahlte Icons filtern

Einige der Suchergebnisse sind grau, was bedeutet, dass es sich um kostenpflichtige Versionen handelt. Wir können links auf den Filterpunkt „Kostenlos“ klicken, um die kostenpflichtigen Versionen herauszufiltern.

4. Klicken Sie auf das Symbol, um anzuzeigen

Wählen Sie ein Symbol aus, das Ihnen gefällt, und klicken Sie, um den Inhalt anzuzeigen.

Rechts ist der auszuwählende Stil. Hier sieht man, dass dieses Icon Solid, Regular und Light (Paid Style) unterstützt. Dann folgt unten der bekannte Verwendungscode, der allerdings nicht direkt in Vue verwendet werden kann. Er sollte in folgende Schreibweise geändert werden:

<font-awesome-icon :icon="['fas','Benutzer]"/>

Übergeben Sie ein Array an die Icon-Eigenschaft. Der erste Parameter ist der Stil und der zweite der Icon-Name. Es scheint, dass wir uns das Schreiben von „fa-“-Zeichen sparen können, aber die Struktur fühlt sich komplizierter an als zuvor (⊙o⊙)...

5. Ergebnisse ansehen

OK, es ist Zeit, sich die Ergebnisse unserer harten Arbeit anzusehen. Öffnen Sie Ihren Browser, um den Symboleffekt anzuzeigen. Die Einführung war erfolgreich!

Zusammenfassen

Font Awesome 5 ist im Vergleich zu früheren Versionen absolut perfekt in der Symboloptimierung und die Symbolbibliothek ist auch viel inhaltsreicher. Die Konfiguration ist jedoch komplizierter als zuvor und dauert einige Zeit. Insgesamt ist es eine großartige Symbolbibliothek. Wenn Sie sie nützlich finden, geben Sie ihr bitte einen Daumen hoch!

Dies ist das Ende dieses Artikels zur Verwendung von Font Awesome 5 in Vue-Entwicklungsprojekten. Weitere Informationen zur Verwendung von Font Awesome 5 in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!