So fügen Sie Font Awesome-Symbole zu WordPress hinzu – Die vollständige Anleitung

Darum geht es in diesem Ratgeber. Wenn Sie mit dem Lesen fertig sind, wissen Sie genau, wie Sie:

• Fügen Sie das Font Awesome-Stylesheet manuell zu WordPress hinzu
• Fügen Sie Font Awesome mit einem kostenlosen Plugin zu WordPress hinzu
• Fügen Sie Font Awesome-Symbole auf verschiedene Arten ein und gestalten Sie sie

Lassen Sie uns graben…

Warum Sie sich die Zeit nehmen sollten, Font Awesome Icons zu WordPress hinzuzufügen

Font Awesome-Symbole sind großartig, weil sie, wie der Name schon sagt, eher eine Symbolschrift als Bilder sind. Das bedeutet, dass Sie coole Dinge tun können wie:

• Ändern Sie die Größe ohne Qualitätsverlust, da die Symbole Vektoren sind
• Ändern Sie Farben, fügen Sie Animationen hinzu und verwenden Sie andere CSS-Manipulationen

Alles in allem sind Font Awesome-Symbole der Verwendung eines statischen Bildes weit überlegen.

Zuerst zeige ich Ihnen zwei verschiedene Möglichkeiten, sie zu Ihrer Website hinzuzufügen. Dann zeige ich Ihnen, wie Sie Ihre Symbole gestalten und manipulieren können (egal welche Methode Sie wählen).

So fügen Sie Font Awesome Icons manuell zu WordPress hinzu

Wenn Ihnen der Gedanke, in den Code Ihres Themas einzudringen, Angst macht, empfehle ich Ihnen, mit dem nächsten Abschnitt fortzufahren, in dem ich Ihnen zeige, wie Sie Font Awesome-Symbole mit einem kostenlosen Plugin zu WordPress hinzufügen.

Ansonsten mag ich diese Methode als nette, leichte Möglichkeit, Font Awesome zum Laufen zu bringen.

Im Grunde müssen Sie lediglich das Font Awesome-Stylesheet zu Ihrem WordPress-Theme hinzufügen. Dann können Sie mit dem Einfügen von Font Awesome-Symbolen beginnen und sie nach Belieben gestalten.

So funktioniert der gesamte Prozess Schritt für Schritt:

Schritt 1: Fügen Sie Font Awesome Stylesheet in Ihr WordPress-Theme ein

Wie ich bereits sagte, besteht Ihr erster Schritt darin, das Font Awesome CSS-Stylesheet zu Ihrem WordPress-Theme hinzuzufügen. Während Sie dies direkt von der Font Awesome-Website erhalten können, ist meine bevorzugte Methode die Verwendung der auf Bootstrap CDN gehosteten Version.

Derzeit lautet dieser Link:

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Aber es wird sich ändern, wenn Font Awesome neue Versionen veröffentlicht. Daher ist es eine gute Idee, den Link in regelmäßigen Abständen auf die neueste Version zu aktualisieren (obwohl ältere Versionen weiterhin funktionieren).

Um dieses Stylesheet zu WordPress hinzuzufügen, müssen Sie es in die Datei functions.php Ihres Child-Themes einreihen . Während die grundlegende Methode zum Hinzufügen von CSS darin besteht, den Link in Ihren Header einzufügen, ist es eine bewährte Methode, die spezielle WordPress-Enqueue-Funktion zu verwenden, anstatt das Stylesheet direkt in Ihren Header einzufügen.

Darüber hinaus stellt die Verwendung eines untergeordneten Designs sicher, dass Ihre Änderungen nicht überschrieben werden, wenn Sie Ihr Design jemals aktualisieren müssen.

Da das Befolgen von Best Practices für den WordPress-Code eine gute Sache ist, empfehle ich Ihnen auf jeden Fall, sowohl ein untergeordnetes Thema als auch die Enqueue-Funktion zu verwenden.

Okay, hier ist, wie es geht:

Gehen Sie zu Darstellung → Editor und wählen Sie die Datei functions.php für Ihr Child-Theme aus.

Fügen Sie dann diesen Code ein:

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

Stellen Sie sicher, dass Sie Ihre Änderungen speichern und Sie sind fertig! Nicht zu schmerzhaft, oder?

Schritt 2: Font Awesome Icons einfügen

Sobald Sie das Stylesheet in die Warteschlange gestellt haben, können Sie Font Awesome-Symbole in Ihre Website einfügen, indem Sie zur Font Awesome-Symbolsuche gehen und ein Symbol finden, das Sie einfügen möchten:

Wenn Sie auf ein Symbol klicken, gibt Ihnen Font Awesome den Code, den Sie benötigen, um das Symbol zu verwenden:

Alles, was Sie tun müssen, ist diesen Code auf der Registerkarte Text des WordPress-Editors zu platzieren, um Ihrer Website ein Symbol hinzuzufügen.

Und das ist es! Sie haben Font Awesome-Unterstützung erfolgreich zu WordPress hinzugefügt. Jetzt müssen Sie nur noch lernen, wie Sie Font Awesome-Symbole auf Ihrer WordPress-Site gestalten.

Aber bevor ich Ihnen das zeige, möchte ich die Plugin-Methode zum Hinzufügen von Font Awesome Support durchgehen. Fühlen Sie sich frei, weiter zu springen, wenn Sie mit der manuellen Methode über die Plugin-Methode gegangen sind.

So fügen Sie Font Awesome Icons mit einem Plugin zu WordPress hinzu

Wenn Sie lieber ein Plugin verwenden möchten, anstatt das Font Awesome-Stylesheet manuell in die Warteschlange einzureihen, gibt es eine solide kostenlose Option namens Better Font Awesome, die auf WordPress.org aufgeführt ist.

Better Font Awesome fügt nicht nur immer das neueste Stylesheet zu Ihrer Website hinzu:

• Ermöglicht die Verwendung von Shortcodes zum Einbetten von Font Awesome-Symbolen.
• Bietet Ihnen im TinyMCE-Editor ein Dropdown-Menü zum Einfügen von Symbolen.

Wenn Sie regelmäßig Font Awesome-Symbole verwenden möchten, könnten diese beiden Tools Ihnen das Leben erleichtern. Aber für den seltenen Gebrauch halte ich die manuelle Methode für die einfachste Option, weil sie am leichtesten ist.

Schritt 1: Installieren und aktivieren Sie das Plugin

Um Font Awesome hinzuzufügen, müssen Sie lediglich das Plugin installieren und aktivieren. Es gibt wirklich nichts anderes.

Es gibt zwar ein Grundeinstellungsfenster, auf das Sie zugreifen können, indem Sie zu Einstellungen → Better Font Awesome gehen, aber es steht Ihnen völlig frei, alles als Standard zu belassen.

Schritt 2: Font Awesome Icons einfügen

Um Font Awesome Icons mit dem Plugin einzufügen, haben Sie zwei verschiedene Möglichkeiten:

• Verwenden Sie den Code von der Website von Font Awesome, wie ich es im vorherigen Abschnitt gezeigt habe.
• Verwenden Sie Shortcodes, die aus einem Dropdown-Menü generiert werden können.

Da ich Ihnen die erste Methode bereits im vorherigen Abschnitt gezeigt habe, gebe ich Ihnen nur einen kurzen Blick auf den Dropdown-Shortcode-Generator.

Wenn Sie einen neuen Beitrag oder eine neue Seite erstellen, sehen Sie neben der Schaltfläche „ Medien hinzufügen“ eine neue Schaltfläche „Symbol einfügen “. Wenn Sie darauf klicken, sehen Sie alle verfügbaren Font Awesome-Symbole sowie eine Option zum Filtern der Ergebnisse:

Alles, was Sie tun müssen, ist auf das von Ihnen gewählte Symbol zu klicken und das Plugin fügt den richtigen Shortcode ein:

Und das ist alles, was dazu gehört!

Nachdem Sie nun Font Awesome-Symbole unterstützt haben, wollen wir uns mit einigen Möglichkeiten befassen, wie Sie Ihre Font Awesome-Symbole gestalten und manipulieren können.

So gestalten Sie fantastische Symbole für Schriftarten und ändern die Größe

Unabhängig davon, welche Methode Sie verwendet haben, um Font Awesome zu WordPress hinzuzufügen, verwenden Sie die gleichen Grundprinzipien, um Ihre Symbole zu gestalten.

Darüber hinaus funktionieren diese Befehle unabhängig davon, ob Sie Shortcodes oder den Einbettungscode von der Website von Font Awesome verwenden.

Die meisten dieser Tipps stammen direkt von der Font Awesome-Beispielseite, sodass Sie sich keine Gedanken über die Kompatibilität machen müssen.

Ändern Sie die Größe der Font Awesome-Symbole

Beginnen wir mit einem einfachen – Erhöhen Sie die Größe Ihrer Font Awesome-Symbole. Standardmäßig sind die Symbole ziemlich klein, also ist dies definitiv eine Situation, auf die Sie wahrscheinlich stoßen werden.

Um die Größe eines Symbols zu erhöhen, können Sie einen dieser Modifikatoren verwenden:

• fa-lg – vergrößert die Größe um 33 %
• fa-2x – doppelte Größe
• fa-3x – dreifache Größe
• fa-4x – …
• fa-5x – …

Um diese Modifikatoren zu verwenden, fügen Sie sie einfach nach dem Namen des Symbols (aber innerhalb der Anführungszeichen) für den Code und innerhalb der Klassenzitate für den Shortcode hinzu. Hier ist ein Beispiel für die Verdreifachung der Größe eines Symbols für beide Einbettungsmethoden:

• <i class=”fa fa-download fa-3x ” aria-hidden=”true”></i>
• [icon name=“download“ class=“ fa-3x “]

Zum Beispiel dies:

Wird das am Frontend:

Drehen Sie Font Awesome Icons

Sie können Font Awesome-Symbole auch einfach drehen, um ihre Ausrichtung zu ändern.

Hier sind die Modifikatoren für die Drehung. Sie können diese genau wie die obigen Größenmodifikatoren verwenden:

• fa-rotate-90 – dreht sich um 90 Grad
• fa-rotate-180 – dreht sich um 180 Grad
• fa-rotate-270 – dreht sich um 270 Grad
• fa-flip-horizontal – dreht das Symbol entlang seiner horizontalen Achse
• fa-flip-vertikal – dreht das Symbol entlang seiner vertikalen Achse

Animation zu Font Awesome Icons hinzufügen

Sie können Ihren Symbolen auch einige grundlegende Animationen hinzufügen. Font Awesome bietet Ihnen zwei verschiedene Modifikatoren, um Drehungen hinzuzufügen:

• fa-spin – fügt eine sanfte Rotation hinzu
• fa-pulse – lässt das Symbol in 8 verschiedenen Schritten rotieren

Diese Animationen lassen sich am besten mit kreisförmigen Symbolen kombinieren. Wenn Sie andere seltsam geformte Symbole verwenden, sieht der Effekt möglicherweise etwas seltsam aus.

Ändern Sie die Farbe des Font Awesome-Symbols

Abschließend zeige ich Ihnen, wie Sie die Farbe von Font Awesome-Symbolen ändern. Leider gibt es dafür keine eingebauten Modifikatoren. Stattdessen müssen Sie benutzerdefiniertes CSS verwenden.

Aber keine Sorge – es ist super einfach.

Alles, was Sie brauchen, ist dieser kleine Code:

.fa-NAME {
color: COLOR;
}

Dabei ist fa-NAME der tatsächliche Name Ihres Symbols und FARBE die Farbe, in die Sie es ändern möchten.

Um beim Download -Symbol aus unseren vorherigen Beispielen zu bleiben, würden Sie es wie folgt rot färben:

Sie können ganz einfach benutzerdefiniertes CSS hinzufügen, indem Sie zu Darstellung → Anpasser → Zusätzliches CSS gehen.

Dinge einpacken

Die Einrichtung von Font Awesome-Symbolen kann einige Minuten dauern. Aber sobald Sie sie installiert haben, sind sie für immer da. Von da an müssen Sie zum Einfügen und Gestalten einzelner Font Awesome-Symbole nur noch die obigen Schritte ausführen.

Seien Sie sich nur bewusst – wenn Sie die manuelle Methode verwenden, sollten Sie regelmäßig den Link zum Stylesheet aktualisieren, um über die neuesten Versionen auf dem Laufenden zu bleiben.