So verwenden Sie Font Awesome auf Ihrer WordPress-Website

Wenn Sie die Wahl haben, ein Vektorsymbol oder ein statisches Bild zu verwenden, ist es eine gute Idee, den Vektor zu verwenden. Sie sind klein und schnell zu laden und können ohne Auflösungsverlust auf jede beliebige Größe skaliert werden. Font Awesome ist eine hervorragende Bibliothek mit Vektorsymbolen, die Sie auf Ihren Websites verwenden können, und sie haben wahrscheinlich fast jede Form oder Marke, die Sie benötigen. Und das Beste von allem? Es ist kostenlos. Das Zweitbeste ist, es ist einfach.

Abonnieren Sie unseren Youtube-Kanal

Schriftart Awesome WordPress Icons

Die Verwendung der Font Awesome-Bibliothek auf Ihrer WordPress-Site ist relativ schmerzlos. Sobald Sie diese einfachen Schritte befolgen, können Sie die Ladezeit von Seiten verkürzen und mit diesen Symbolen als Teil Ihrer Arbeit einige wirklich saubere, klare Designs erstellen.

Denken Sie daran, dass die Font Awesome-Symbole (meistens) als tatsächliche Schriftarten an Ihre Website geliefert werden. Daher der Name Font Awesome. Sie können sie mit CSS über @font-face und die Font Awesome font-family auf jede Weise stylen und manipulieren, wie Sie es normalerweise mit einem Schriftzeichen tun könnten.

Aus diesem Grund müssen Sie sich nicht um die Größe oder den Abstand für jeden einzelnen Browser oder Viewport kümmern. Wenn es großartig klingt, liegt es daran. Und so machst du es:

Font Awesome installieren

Während es eine manuelle Möglichkeit gibt, Font Awesome zu installieren und zu verwenden, gibt es für WordPress-Benutzer eine bessere Möglichkeit. Die feinen Leute von FA haben ein offizielles Font Awesome WordPress-Plugin veröffentlicht, und es funktioniert wunderbar.

Wenn das Plugin installiert und aktiviert ist, haben Sie nun Zugriff auf den Shortcode [[Symbolname]] sowie die HTML-Snippets. Solange Sie die praktische Liste der FA-Symbole aufbewahren, wissen Sie genau, welches Symbol Sie benötigen. Sie sehen auf der Einstellungsseite des Plugins (zu finden unter Einstellungen – Font Awesome ), wie die Dinge standardmäßig eingerichtet sind. Im Allgemeinen sind diese gut zu behalten und zu verwenden. Die meisten Leute werden nichts anderes brauchen.

Die Option Methode ist für die meisten Leute wahrscheinlich die wichtigste. Sie können zwischen Webfont und SVG umschalten . Während SVG Ihnen mehr Leistung und Funktionen bietet (z. B. Leistungstransformationen und Maskierung), liefert das Font Awesome CDN die Symbole als SVG-Dateien und nicht als Schriftart. Das ist zwar in mancher Hinsicht besser, aber das SVG wird von nicht so vielen Browsern erkannt, und WordPress spielt auch nicht immer gut mit SVG-Bildern. Wir empfehlen daher, mit der Webfont-Version auf Nummer sicher zu gehen.

Das gilt auch für Font Awesome: Wenn Sie sich des Unterschieds nicht sicher sind oder nicht wissen, warum Sie SVG verwenden müssen, ist es wahrscheinlich am einfachsten, bei der Standard-Webfont-Methode zu bleiben.

Es ist ganz einfach, die Font Awesome-Symbole auf Ihrer WordPress-Site zu verwenden. Fügen Sie einfach <i class=”fab fa-wordpress”></i> überall dort hinzu, wo ein Symbol erscheinen soll. Stellen Sie sicher, dass Sie die Symbolbibliothek überprüfen, um zu wissen, welchen Namen Sie eingeben müssen.

Hinweis: Die Shortcodes im Plugin sind Hit-and-Miss. Einige Symbole werden perfekt gerendert, während andere leer angezeigt werden. Wir empfehlen Ihnen, bei der HTML-Einfügung zu bleiben, es sei denn, Sie sehen, dass der Shortcode für Sie funktioniert. Unten finden Sie ein Beispiel für das obige WordPress-Beispiel, das nicht gerendert wird, während das Kamerasymbol dies tut.

Und du bist fertig. Das Font Awesome WordPress-Plugin ist ideal für Leute, die sich nicht wohl fühlen, in ihr Thema oder ihre Dateien einzusteigen, um den ansonsten erforderlichen Code einzufügen. Wenn Sie jedoch damit vertraut sind, können Sie diese Anweisungen befolgen, um die Font Awesome-Symbole auf Ihrer Website zu erhalten.

Font Awesome Icons manuell installieren

Das allererste, was Sie tun müssen, ist die Font Awesome-Website zu besuchen. Klicken Sie dort auf die Schaltfläche Kostenlos starten . Sie bieten kostenpflichtige Pläne für Leute an, die stark frequentierte Websites haben und eine Unternehmenslösung benötigen, aber die breite Öffentlichkeit kann mit der kostenlosen Version davonkommen. Sie erhalten 1.500 Icons kostenlos und über 5.000 Varianten im Pro-Plan.

Der nächste Schritt besteht darin, einfach zu kopieren/einzufügen. Sie sollten jedoch sicherstellen, dass Sie die Webfont-Option markiert haben, genau wie wir zuvor besprochen haben.

Bei den meisten Themes können Sie automatisch Code in den <head> der Site einfügen. Im Fall von Divi würden Sie zum Beispiel zu Themenoptionen – Integrationen gehen und diesen Code in das Feld mit der Bezeichnung Code zum Kopf Ihres Blogs hinzufügen einfügen .

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Wenn Sie auf Speichern klicken, können Sie beginnen, jedes der gewünschten Symbole einzufügen, genau wie wir es oben getan haben. Nur haben Sie dadurch keinen Zugriff auf den Shortcode .

Wenn Ihr Theme die Code-Integration nicht unterstützt

Wenn Sie eine solche Stelle in Ihrem Thema nicht finden, können Sie dies auch manuell tun. Sie müssen dafür jedoch in die Core-Dateien Ihres Themes graben, aber es ist ein sehr schnelles Kopieren / Einfügen und (im Allgemeinen) ziemlich sicher. Gehen Sie in Ihrem WP-Dashboard zu Erscheinungsbild – Editor und suchen Sie die Datei header.php .

Suchen Sie die Zeile, in der </head> steht, und davor müssen Sie denselben Code von Font Awesome einfügen. Drücken Sie auf Datei aktualisieren , und Sie können sofort mit der Verwendung der FA-Symbole beginnen. Auch hier erhalten Sie keinen Shortcode, wenn Sie Font Awesome auf diese Weise installieren.

Denken Sie auch daran, dass Sie jedes Mal, wenn Sie eine Designdatei bearbeiten, ein untergeordnetes Design verwenden möchten. Auf diese Weise verhindern Sie, dass die von Ihnen vorgenommenen Änderungen bei der Aktualisierung des Designs überschrieben werden.

Weitere Optionen für die Installation

Und wenn Sie andere, spezifischere Anforderungen an Font Awesome haben, bieten sie eine Reihe von Möglichkeiten, um auf die Bibliothek zuzugreifen. Von NPM- und Yarn-Installationen bis hin zur Sketch- und React-Integration haben sie eine Menge Optionen, wenn Sie sie für mehr als WordPress benötigen.

Tolle Schriftsymbole gestalten

Nachdem Sie sie installiert haben, ist es an der Zeit, die Symbole zum Platzen zu bringen. Sie können dies mit CSS tun, da jedes der Symbole von einer CSS-Klasse gesteuert wird. Die beiden am häufigsten verwendeten Stile sind Farbe und Größe. Sie können das CSS-Styling entweder in Ihre Stylesheets einbinden oder es inline tun. Im Allgemeinen möchten Sie möglicherweise Inline-Styling verwenden, da Symbole wie diese in der Regel nicht auf einer gesamten Site universell sind.

Auf der Font Awesome-Website finden Sie Beispiele dafür. Sie zeigen die Größe mit ihrem Iglu-Symbol und der zusätzlichen Klasse wie fa-xs oder fa-xl oder fa-2x für eine bestimmte Größe an.

Wenn das Symbol relativ zu einer bestimmten Größe sein muss und die absoluten Werte nicht funktionieren, können Sie es in einem eigenen <div> platzieren , damit es innerhalb Ihrer Einschränkungen funktioniert.

<div style="font-size: 0.5rem;">
  <i class="fas fa-igloo fa-10x"></i>
</div>

Einpacken

Und das ist es! Genial, oder? Egal, ob Sie das Font Awesome WordPress-Plugin verwenden oder den Code manuell einfügen, es sind nicht mehr als ein paar Schritte erforderlich, um Ihre Website zum Laufen zu bringen. Font Awesome ist aus einem bestimmten Grund beliebt, und einige davon sind auf seine Benutzerfreundlichkeit zurückzuführen. Also geh raus und sei großartig!

Wie verwendest du Font Awesome-Symbole am liebsten?

Beitragsbild des Artikels mit freundlicher Genehmigung von Font Awesome