So fügen Sie Font Awesome zu WordPress hinzu: 3 einfache Methoden 

Sie laden ein Social-Icon als PNG hoch, es sieht auf Ihrem Laptop gut aus, und dann öffnen Sie die Website auf Ihrem Handy und die Ränder sind weich geworden. Ändern Sie Ihre Markenfarbe sechs Monate später und Sie sind wieder in einem Bildeditor und exportieren den gesamten Satz neu.

Font Awesome löst beide Probleme, da seine Symbole Vektorformen sind, die Sie mit einem Farbwähler anstelle einer Grafik-App neu gestalten.

Es gibt drei Möglichkeiten, es in WordPress zu integrieren, und ich hatte sie lange Zeit auf dieser Seite in der falschen Reihenfolge. Das offizielle kostenlose Plugin ist für die meisten Leute der einfachste Weg, also fange ich dort an.

Methoden, um Font Awesome zu WordPress hinzuzufügen:

• Was ist Font Awesome und warum sollte man es verwenden?
• 1. Font Awesome mit dem offiziellen Plugin hinzufügen
• 2. Font Awesome überall in Ihrem Design mit SeedProd hinzufügen
• 3. Font Awesome manuell mit Code hinzufügen
• Welche Methode sollten Sie verwenden?
• FAQs zum Hinzufügen von Font Awesome zu WordPress

Was ist Font Awesome und warum sollte man es verwenden?

Font Awesome ist eine Icon-Bibliothek. Anstatt für jeden Pfeil, jedes Telefonsymbol und jedes soziale Logo ein Bild hochzuladen, wählen Sie eines aus einer Liste aus und fügen es auf Ihrer Seite ein.

Die Icons sind Vektoren und keine Bilder, sodass sie in jeder Größe scharf bleiben und Sie sie wie Text neu gestalten können.

Sie sind auch viel leichter als die PNGs, die sie ersetzen, was hilfreich ist, wenn Sie daran arbeiten, Ihre WordPress-Website schneller zu machen.

Wie viele Icons Sie erhalten, hängt davon ab, welchen Weg Sie wählen, und die Zahlen werden locker angegeben. Hier ist eine, auf die ich tatsächlich verweisen kann. Ich habe SeedProd 6.20.9 auf meiner eigenen Testseite geöffnet und die mitgelieferte Icon-Bibliothek gezählt: 2.420 Icons aus Font Awesome Free 6.6.0.

Sie werden auch über moderne Browser und Geräte hinweg konsistent gerendert, und Sie können Farbe, Größe und Ausrichtung ändern, ohne eine Bilddatei zu berühren. Der letzte Teil ist der eigentliche Gewinn, denn er ist der Unterschied zwischen einer Farbänderung, die zehn Sekunden dauert, und einer, die einen Nachmittag dauert.

Als Nächstes holen wir es auf Ihre Website.

1. Font Awesome mit dem offiziellen Plugin hinzufügen (am einfachsten)

Wenn Sie nur Icons in Ihren Beiträgen und Seiten haben möchten, beginnen Sie hier. Das offizielle Font Awesome Plugin ist kostenlos, wurde vom Font Awesome-Team entwickelt und erspart Ihnen die Verwaltung von Stylesheets.

Ich würde prüfen, ob es noch betreut wird, bevor ich ein Icon-Plugin installiere, da viele aufgegeben werden. Als ich mir die WordPress.org-Liste ansah, war es Version 5.2.1, aktualisiert im August 2026 und getestet gegen WordPress 7.1, was ungefähr so aktuell ist, wie Plugin-Listen eben sind.

Installieren Sie es unter Plugins › Neu hinzufügen, wie jedes andere Plugin auch, und aktivieren Sie es dann. Wenn Sie das noch nie getan haben, gibt es eine Anleitung für Anfänger zur Installation eines WordPress-Plugins, die Sie durchführt.

Ein Icon mit dem Font Awesome Block hinzufügen

Sobald das Plugin aktiv ist, öffnen Sie einen beliebigen Beitrag oder eine Seite und fügen Sie den Block Font Awesome Icon hinzu.

Klicken Sie auf Icon auswählen und der Icon-Auswähler öffnet sich.

Von dort aus können Sie nach Icon-Namen, Kategorie oder Schlüsselwort suchen und die Familie und den Stil mit den Dropdown-Menüs ändern, wenn Sie eine leichtere oder schwerere Version derselben Form wünschen. Klicken Sie auf das gewünschte Icon und es wird in Ihren Inhalt eingefügt.

Wenn Sie lieber ein Icon mitten in einem Satz als auf einer eigenen Zeile platzieren möchten, markieren Sie den Text und wählen Sie stattdessen Font Awesome aus der Formatierungs-Symbolleiste. Dies öffnet denselben Icon-Auswähler und erfordert WordPress 6.3 oder neuer.

Font Awesome Icons mit einem Shortcode hinzufügen

Diese Seite lehrte früher den Shortcode als Hauptzugangsweg, eingefügt in einen Shortcode-Block. Das war die falsche Beratung für jeden, der den Block-Editor verwendet, und der obige Block ist das, was Sie stattdessen wollen.

Shortcodes funktionieren jedoch immer noch und sind das, worauf die eigene Dokumentation des Plugins verweist, wenn Sie sich im klassischen Editor befinden. Fügen Sie den Namen des gewünschten Icons hinzu:

[icon name="rocket"]

Ersetzen Sie „rocket“ durch das, was Sie benötigen, und lassen Sie das Präfix fa- beim Namen weg. Wenn kein Stil angegeben ist, erhalten Sie die klassische solide Version des Icons.

Um ein bestimmtes Gewicht anzufordern, fügen Sie ein Präfix hinzu:

[icon name="rocket" prefix="fa-sharp fa-light"]

Um den Namen eines Icons zu finden, durchsuchen Sie die Galerie unter fontawesome.com/icons und klicken Sie auf das gewünschte.

Kopieren Sie den Namen, fügen Sie ihn in Ihren Shortcode ein und veröffentlichen Sie ihn.

Diese Methode hat eine wirkliche Einschränkung. Sie platziert Icons in Ihrem Inhalt, was in Ordnung ist, bis Sie eines in Ihrem Website-Header, in einem Menü oder auf einer von Ihnen selbst gestalteten Landingpage benötigen. Dafür benötigen Sie etwas, das das Design bearbeitet und nicht den Beitrag.

2. Font Awesome überall in Ihrem Design mit SeedProd hinzufügen

SeedProd ist ein Drag-and-Drop-Website-Builder für WordPress, sodass Sie Seiten und Vorlagen visuell gestalten, anstatt Theme-Dateien zu bearbeiten. Ich erstelle meine eigene Website damit, und Icons sind eines der Dinge, die es wirklich schnell macht.

Der Grund für die Verwendung hier ist die Platzierung. Da Sie das Design bearbeiten, können Sie ein Font Awesome-Icon in einen Header, einen Footer, eine Seitenleiste oder eine Landingpage einfügen, und das alles ohne HTML- oder CSS-Klassen.

Hier ist, wie ich sie hinzufüge.

Schritt 1. SeedProd installieren und aktivieren

Installieren und aktivieren Sie SeedProd auf Ihrer Website. Es gibt eine kostenlose Version, und die Icon- und Icon-Box-Blöcke, die ich unten verwende, sind in jedem kostenpflichtigen Plan verfügbar, sodass Basic Sie abdeckt, wenn Sie dort beginnen.

Nach der Aktivierung werden Sie zum Lizenzbildschirm weitergeleitet. Fügen Sie Ihren Lizenzschlüssel ein und klicken Sie auf Schlüssel überprüfen. Sie können jederzeit von SeedProd › Einstellungen › Lizenzschlüssel darauf zurückgreifen.

Ihr Schlüssel befindet sich in Ihrem Konto auf der SeedProd-Website im Download-Bereich.

Schritt 2. Benennen Sie Ihre Seite und wählen Sie eine Vorlage

Gehen Sie zu SeedProd › Landing Pages und klicken Sie auf Neue Landing Page hinzufügen.

Benennen Sie Ihre Seite zuerst. SeedProd erstellt eine URL aus dem Namen, während Sie tippen, und Sie können diese später in den Seiteneinstellungen ändern.

Klicken Sie dann auf Weiter: Vorlage auswählen und wählen Sie ein Design zum Starten aus.

Jede Vorlage kann von oben bis unten angepasst werden, wählen Sie also diejenige aus, die dem am nächsten kommt, was Sie möchten, anstatt sich darüber den Kopf zu zerbrechen. Es gibt eine Option „Leer“, wenn Sie lieber bei Null anfangen möchten.

SeedProd öffnet dann die Seite im visuellen Editor.

Schritt 3. Font Awesome Icons hinzufügen

Der Editor zeigt eine Live-Vorschau Ihrer Seite rechts und Blöcke und Einstellungen links an.

Klicken Sie auf einen beliebigen Block, der sich bereits auf der Seite befindet, und seine Einstellungen werden in der linken Seitenleiste geöffnet, wo Sie Inhalte, Farben, Hintergründe und Schriftarten ändern können.

Um ein Icon hinzuzufügen, suchen Sie den Block Icon unter Design und ziehen Sie ihn auf Ihr Layout.

Standardmäßig wird er mit einem Pfeil eingefügt. Wenn der Block ausgewählt ist, klicken Sie im Einstellungsbereich auf die Schaltfläche Icon-Bibliothek, um ihn auszutauschen.

Dadurch wird der Auswähler mit allen 2.420 Icons geöffnet. Scrollen Sie oder geben Sie in das Suchfeld ein, wonach Sie suchen. Das ist schneller, sobald Sie ungefähr wissen, wie das Icon heißt.

Klicken Sie darauf und es wird auf Ihrem Layout platziert. Sie können dann Farbe, Größe, Ausrichtung und Link festlegen.

Wenn das Icon eine Überschrift und eine Textzeile mit sich führen soll, verwenden Sie stattdessen den Block Icon Box. Er verhält sich genauso, bietet aber Platz für den zusätzlichen Text. Ich greife zu diesem Block bei Funktionsbereichen, wo ein bloßes Icon allein nicht genug aussagt.

Zwei weitere Blöcke stammen aus demselben Icon-Set und sind es wert, sie zu kennen, da sie das manuelle Platzieren von Icons ersparen.

Der Social Profiles-Block verwaltet benutzerdefinierte Social-Media-Icons als Set, sodass Sie nicht für jedes Netzwerk ein einzelnes Icon ziehen müssen.

Und wenn Sie einen Shop betreiben, platziert der Menu Cart-Block ein Einkaufswagen-Icon in Ihrem Menü.

Schritt 4. Veröffentlichen Sie Ihre Änderungen

Klicken Sie auf Speichern und dann auf Veröffentlichen, um die Seite live zu schalten.

Besuchen Sie die Seite und überprüfen Sie die Icons bei einigen Bildschirmgrößen, bevor Sie fortfahren.

3. Font Awesome manuell mit Code hinzufügen

Sie können Font Awesome auch selbst laden und das Plugin komplett überspringen. Ich würde das nur tun, wenn Sie sich mit der Bearbeitung von Theme-Dateien auskennen, da ein Tippfehler hier die gesamte Website lahmlegt, anstatt nur ein Icon zu beschädigen.

Der unten stehende Ausschnitt lädt die Stylesheet-Datei von einem CDN. Er gehört in die functions.php-Datei eines Child-Themes, niemals in das Parent-Theme, da die nächste Theme-Aktualisierung ihn sonst löschen würde.

function my_theme_font_awesome() {
    wp_enqueue_style(
        'font-awesome',
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css',
        array(),
        '6.6.0'
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_font_awesome' );

Wenn das eingerichtet ist, schreiben Sie Icons als HTML, wo immer Sie HTML hinzufügen können:

<i class="fa-solid fa-rocket"></i>

Ehrlich gesagt bearbeite ich functions.php dafür aber nicht mehr. Ich bewahre Snippets wie dieses in WPCode auf, da der Code dann einen Theme-Wechsel übersteht und ich ihn deaktivieren kann, ohne einen Dateieditor zu öffnen.

Welche Methode sollten Sie verwenden?

Die Frage, die diese drei eigentlich trennt, ist, wo das Icon erscheinen soll, nicht wie einfach es einzurichten ist.

Methode	Wo Icons platziert werden können	Code benötigt?	Kosten
Offizielles Font Awesome Plugin	Innerhalb von Beiträgen und Seiten, auch mitten im Satz	Nein	Kostenlos
SeedProd	Überall im Design: Header, Footer, Menüs, Landing Pages	Nein	Icon und Icon Box auf jedem kostenpflichtigen Plan
Manueller Code	Überall dort, wo Sie HTML schreiben können	Ja	Kostenlos

Für die meisten Leute, die Beiträge schreiben, ist das offizielle Plugin die richtige Antwort und ich würde es dabei belassen. Es ist kostenlos, wird von den Machern der Icons gepflegt und der Icon Chooser ist schneller, als nach einem Klassennamen zu suchen.

Wo es an seine Grenzen stößt, ist alles außerhalb Ihres Inhalts. Wenn das Icon in einem Header, Footer, Menü oder einer Seite platziert werden muss, die Sie selbst gestaltet haben, verwende ich SeedProd, da ich zu diesem Zeitpunkt das Design bearbeite und nicht den Beitrag.

Der manuelle Weg lohnt sich in einem Fall: Sie möchten eine bestimmte Font Awesome-Version fixieren und möchten nicht wirklich ein Plugin dafür hinzufügen. Andernfalls übernehmen Sie eine Wartungsaufgabe ohne wirklichen Gewinn.

FAQs zum Hinzufügen von Font Awesome zu WordPress

Ist Font Awesome kostenlos auf einer WordPress-Website nutzbar?

Ja, das kostenlose Set deckt die meisten Websites ab und es ist das, was sowohl das offizielle Plugin als auch SeedProd standardmäßig liefern. Font Awesome verkauft ein Pro-Abonnement für die größere Icon-Bibliothek und zusätzliche Stile, aber Sie benötigen es nicht, um Icons auf einer Seite zu platzieren.

Warum werden meine Font Awesome Icons als leere Quadrate angezeigt?

Normalerweise wird das Stylesheet nicht geladen, oder zwei verschiedene Versionen von Font Awesome werden geladen und bekämpfen sich gegenseitig, was passiert, wenn Ihr Theme eines enthält und ein Plugin ein anderes. Das offizielle Plugin verfügt über einen integrierten Konfliktscanner, der die anderen Kopien für Sie findet.

Verlangsamt Font Awesome meine Website?

Es fügt eine Stylesheet-Anfrage hinzu, daher ist die ehrliche Antwort ein wenig, aber weit weniger als die Bilddateien, die es ersetzt. Die Version, die schaden kann, ist das zweimalige Laden der gesamten Bibliothek, was dasselbe Konfliktproblem wie oben ist.

Kann ich ein Font Awesome Icon in mein WordPress-Menü einfügen?

Nicht über den Standardbildschirm "Darstellung" und "Menüs", der nur einfachen Text akzeptiert. Sie würden entweder das Menü in einem Tool erstellen, das Icons unterstützt, wie z. B. die Header-Vorlagen von SeedProd, oder die Icon-Markup von Hand hinzufügen, sobald Font Awesome geladen ist.

Wie ändere ich die Größe und Farbe eines Icons?

In SeedProd stellen Sie beides im Einstellungsbereich des Blocks mit einem Schieberegler und einem Farbwähler ein. In HTML stylen Sie es wie Text oder verwenden die eigenen Größenklassen von Font Awesome wie fa-2x.

Benötige ich SeedProd Pro für die Icon-Blöcke?

Nein. Die Dokumentation von SeedProd listet sowohl den Icon-Block als auch den Icon-Box-Block für alle seine Lizenzpläne auf, sodass Basic diese beinhaltet. Diese Seite besagte früher, dass Sie Pro für die Icon-Box benötigen, was falsch war.

Bereit, Icons zu Ihrer WordPress-Website hinzuzufügen?

Wählen Sie basierend darauf, wo das Icon leben muss. Beiträge und Seiten, verwenden Sie das offizielle Plugin und Sie sind in etwa zwei Minuten fertig.

Wenn es sich um Ihren Header, Footer oder eine von Ihnen gestaltete Seite handelt, dafür sind die Icon- und Icon-Box-Blöcke von SeedProd gedacht, und sie sind auf jedem bezahlten Plan enthalten und nicht hinter der obersten Stufe gesperrt.

In beiden Fällen dauert das spätere Ändern einer Farbe einen Klick statt eines erneuten Exports, was der Grund ist, warum ich aufgehört habe, Bilddateien dafür zu verwenden.

Als Nächstes möchten Sie vielleicht ein Menü in WordPress bearbeiten, um Ihre Navigation aufzuräumen, oder sich die besten WordPress-Themes ansehen, wenn Sie noch ein Design auswählen.

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.