Eine Website ohne Icons wirkt wie eine Textwüste aus dem Jahr 2005. Doch Icons in Photoshop zu zeichnen und mit Sprites zu hantieren macht wenig Freude, besonders wenn Sie kein Designer sind.

Font Awesome löst dieses Problem seit 2012: Es handelt sich um eine kostenlose Bibliothek mit über 2000 Vektoricons, die sich wie normaler Text verhalten. Ändern Sie die Farbe im CSS, und das Icon ändert seine Farbe. Erhöhen Sie die Schriftgröße, und es skaliert ohne Pixelbildung oder Unschärfe.

In der Praxis reicht die kostenlose Version für Menüs, Buttons und soziale Medien aus. Wenn Sie Duotones und über 30.000 Icons benötigen, gibt es Pro ab 60 $ pro Jahr. Nachfolgend drei Wege, Font Awesome in WordPress einzubinden: vom einfachsten bis zur manuellen Installation für diejenigen, die keine Scheu vor der functions.php haben.

💡 Kurzer Überblick:

• Installieren Sie das offizielle Font-Awesome-Plugin aus dem WordPress-Verzeichnis; das dauert eine Minute und erfordert keine Codeänderungen
• Für manuelle Kontrolle binden Sie Font Awesome per CDN oder Kit in der functions.php Ihres Child-Themes ein
• Wenn Sie Elementor nutzen, sind Icons bereits integriert und kein separates Plugin ist nötig
• Nach der Einbindung ändern Sie Icon-Größe, Farbe und Animation über CSS oder vorgefertigte Klassen

Was ist Font Awesome

Font Awesome ist ein Icon-Font: Statt Buchstaben enthält er Icon-Symbole. Der Browser rendert sie als Vektorgrafiken, sodass Kanten auf jedem Bildschirm und in jeder Skalierung scharf bleiben. Keine PNGs, Sprites oder srcset.

Die Bibliothek gliedert sich in zwei Teile. Die kostenlose Version umfasst fünf Stile: Solid, Regular, Brands, Duotone und Sharp. Pro ergänzt Thin, Light und zehntausende Icons sowie die Möglichkeit, eigene SVGs über Kit hochzuladen. Für eine typische Visitenkarten-Website oder einen Blog deckt Free den Großteil der Aufgaben ab: Pfeile, soziale Medien, Suche, Warenkorb, Checkboxen.

Der Hauptvorteil gegenüber Raster-Icons ist die vollständige Kontrolle über CSS. Farbe, Größe, Schatten, Drehung, Animation: Alles wird per Klasse gesetzt, ohne jegliche Grafikbearbeitung.

Methode 1: offizielles Plugin (empfohlen)

Der sicherste Weg ist die Installation des offiziellen Font-Awesome-Plugins auf WordPress.org. Es wird von demselben Team veröffentlicht, das auch die Bibliothek selbst entwickelt. Das Plugin aktualisiert sich synchron mit neuen Icon-Releases und ist unabhängig von Ihrem Theme.

So installieren Sie es:

Gehen Sie zu Plugins → Installieren. Geben Sie in die Suchleiste „font awesome" ein und drücken Sie Enter.

Klicken Sie auf Jetzt installieren, dann auf Aktivieren.

Fertig. Nach der Aktivierung erscheint im Menü Einstellungen ein Font-Awesome-Eintrag, über den Sie die Icon-Quelle (CDN oder Kit) wechseln, die Kompatibilität mit Version vier aktivieren und den Konflikt-Scanner ausführen können.

Das Plugin fügt dem Block-Editor einen eigenen Block „Font Awesome Icon" hinzu. Klicken Sie darauf, und es öffnet sich eine Suche über die gesamte Bibliothek. Wählen Sie ein Icon aus, klicken Sie auf „Einfügen", und es erscheint als SVG im Text. Das Styling erfolgt direkt in der Block-Seitenleiste: Größe, Farbe, Drehung.

Für den klassischen Editor funktioniert ein Shortcode:

1
[icon name="download" prefix="fa-solid"]

Oder reines HTML:

1
<i class="fa-solid fa-download"></i>

Wenn Sie über einen Pro-Account verfügen, erstellen Sie ein Kit auf fontawesome.com, kopieren Sie das API-Token und fügen Sie es in die Plugin-Einstellungen ein. Danach zeigt Ihnen der Icon Chooser auch die Pro-Icons an.

Methode 2: manuelle Installation über die functions.php

Diese Methode richtet sich an alle, die jede auf der Website geladene Ressource selbst steuern oder zusätzliche Plugins vermeiden möchten. Sie funktioniert über ein Child-Theme, sodass ein Update des Parent-Themes Ihre Änderungen nicht überschreibt.

Child-Theme anlegen

Erstellen Sie im Ordner wp-content/themes/ ein Verzeichnis mit dem Suffix -child (zum Beispiel astra-child). Legen Sie darin zwei Dateien an.

style.css:

1
/*
2
Theme Name: Astra Child
3
Template: astra
4
*/

functions.php:

1
<?php
2
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
3
function enqueue_parent_styles() {
4
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
5
}

Gehen Sie zu Design → Themes und aktivieren Sie das Child-Theme.

Font Awesome per CDN einbinden

Fügen Sie diesen Code in die functions.php Ihres Child-Themes ein:

1
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
2
function enqueue_font_awesome() {
3
    wp_enqueue_style(
4
        'font-awesome',
5
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css',
6
        array(),
7
        '6.7.2'
8
    );
9
}

Dieser Hook lädt die kostenlose Version vom cdnjs-CDN, dem zuverlässigsten öffentlichen CDN für FA 6. Die Zahl 6.7.2 entspricht dem Stand von Juni 2026; prüfen Sie die aktuelle Version auf der cdnjs-Paketseite und ersetzen Sie sie durch die neueste.

Alternative: Kit von Font Awesome

Ein Kit ermöglicht den Zugriff auf Pro-Icons und lädt automatisch nur die auf der Seite tatsächlich verwendeten Stile, was überflüssige Kilobytes vermeidet.

Registrieren Sie sich auf der Font-Awesome-Website, erstellen Sie ein Kit, kopieren Sie den Einbettungscode und fügen Sie ihn in die header.php Ihres Child-Themes vor dem schließenden </head> ein:

1
<script src="https://kit.fontawesome.com/YOUR_CODE.js" crossorigin="anonymous"></script>

Der Nachteil des Kits besteht darin, dass die kostenlose Stufe auf 10.000 Seitenaufrufe pro Monat begrenzt ist. Für eine Website mit höherem Traffic nutzen Sie entweder das CDN oder die Pro-Version.

Der integrierte Theme-Editor (Design → Theme-Datei-Editor) erlaubt es Ihnen, die functions.php direkt aus dem Adminbereich zu bearbeiten. Sicherer ist jedoch der Weg per FTP oder über den Dateimanager des Hostings: Ein Tippfehler im PHP-Code legt die Website lahm, und ohne Dateizugriff haben Sie keine Möglichkeit, sie wiederherzustellen.

Methode 3: über Elementor oder einen anderen Page Builder

Wenn Sie bereits Elementor nutzen, benötigen Sie kein separates Font-Awesome-Plugin; der Page Builder enthält die Bibliothek bereits standardmäßig.

In jedem Widget, das ein Icon unterstützt (Icon, Icon-Box, Icon-Liste), klicken Sie auf das Icon, und es öffnet sich eine Bibliothek mit Suche über alle Free-Stile. Farbe, Größe, Schatten und Hover-Effekte konfigurieren Sie in der Seitenleiste, ohne eine einzige Zeile CSS.

Dasselbe gilt für SeedProd, Beaver Builder und Divi. Prüfen Sie die Einstellungen Ihres Page Builders: Nahezu alle gängigen visuellen Builder für WordPress enthalten Font Awesome bereits im Kern.

Icon-Stile ändern

Nach der Einbindung von Font Awesome steuern Sie Icons ausschließlich über Klassen und CSS. Eine direkte Bearbeitung von SVG-Dateien ist nicht erforderlich.

Größe

Die Icon-Größe legen Sie über vorgefertigte Klassen fest. Eine Klasse vergrößert das Icon um ein Drittel, eine andere verdoppelt es, eine dritte verdreifacht es und so weiter bis zur zehnfachen Vergrößerung. Die genauen Werte aller Klassen finden Sie auf der Font-Awesome-Website.

Beispiel für ein in der Größe verdreifachtes Icon:

Beispiel für ein in der Größe verdreifachtes Icon:

1
<i class="fa-solid fa-download fa-3x"></i>

Drehung und Spiegelung

• fa-rotate-90, 90°-Drehung
• fa-rotate-180, 180°-Drehung
• fa-rotate-270, 270°-Drehung
• fa-flip-horizontal, horizontale Spiegelung
• fa-flip-vertical, vertikale Spiegelung

Animation

Zwei Optionen, beide über Klassen:

• fa-spin, gleichmäßige Rotation (geeignet für Lade-Spinner)
• fa-pulse, achtstufige Rotation (pulsierender Effekt)

1
<i class="fa-solid fa-spinner fa-spin"></i>

Farbe

Die Icon-Farbe wird vom übergeordneten Text geerbt. Um eine eigene festzulegen, verwenden Sie eine CSS-Regel:

1
.fa-download {
2
    color: #27ae60;
3
}

Am einfachsten fügen Sie solches CSS über Design → Customizer → Zusätzliches CSS hinzu. Änderungen werden sofort übernommen und sind in Echtzeit sichtbar.

Icon über Pseudoelement

Wenn ein Icon ohne zusätzliches Markup an ein Element angehängt werden soll, nutzen Sie ::before oder ::after im CSS:

1
.external-link::after {
2
    content: "\f08e";
3
    font-family: "Font Awesome 6 Free";
4
    font-weight: 900;
5
    margin-left: 6px;
6
}

Der Code \f08e ist die Unicode-Kennung des Icons. Sie finden diese auf der jeweiligen Icon-Seite bei fontawesome.com, wo sie unter dem Namen aufgeführt ist.

Wo Sie Icons finden

Öffnen Sie fontawesome.com/icons, geben Sie ein Stichwort in die Suche ein und wählen Sie einen Stil. Auf der Icon-Seite finden Sie das HTML-Snippet, den Unicode und die Liste der verfügbaren Stile. Kopieren Sie das Benötigte und fügen Sie es an der gewünschten Stelle ein.

Eine Anmerkung zum Video-Tutorial

Wenn Sie lieber zuschauen als lesen, finden Sie hier ein Tutorial zum Hinzufügen von Font Awesome Icons zu einem WordPress-Menü:

Kehren Sie danach zum Text zurück: Nachfolgend finden Sie Nuancen, die im Video nicht behandelt werden.

⁉️🤔 Häufig gestellte Fragen

Muss ich für Font Awesome bezahlen?

Die kostenlose Version deckt den Bedarf der allermeisten Websites ab: 2000+ Icons in fünf Stilen, inklusive Marken-Icons (Facebook, Twitter, Instagram und Hunderte weitere). Pro kostet ab 60 $ pro Jahr und ergänzt die Thin-, Light- und Sharp-Familien, Duotone in allen Stilen sowie die Möglichkeit, eigene SVGs hochzuladen. Bezahlen ist sinnvoll, wenn Sie Icons als Teil eines Produkts verkaufen oder speziell Duotones benötigen. Das Font-Awesome-Plugin auf WordPress.org ist vollständig kostenlos; Pro-Icons werden über einen API-Token in denselben Plugin-Einstellungen eingebunden, und Sie müssen nichts separat erwerben oder installieren.

Welche Einbindungsmethode soll ich wählen?

Für Einsteiger und typische Websites das offizielle Plugin. Es installiert sich mit zwei Klicks, bietet eine integrierte Icon-Suche im Editor und einen Konfliktscanner. Die manuelle Einbindung per CDN ist gerechtfertigt, wenn Sie Plugins auf Ihrer Website minimieren und genau wissen, in welche Datei Sie wp_enqueue_style einfügen müssen. Kit von Font Awesome ist ein Kompromiss: einfach ohne Plugin einzubinden, aber mit einem kostenlosen Limit von 10.000 Aufrufen.

Was tun, wenn Icons nicht angezeigt werden?

Führen Sie zuerst den Konflikterkennungs-Scanner in den Einstellungen des Font-Awesome-Plugins aus. Meistens liegt das Problem darin, dass das Theme oder ein anderes Plugin eine eigene Version von Font Awesome lädt, was zu einem Versionskonflikt führt. Der Scanner findet die Konfliktquelle, und das Plugin bietet an, sie zu blockieren. Der zweithäufige Fall ist ein Syntaxfehler: Prüfen Sie, ob Sie das Präfix fa-solid verwenden und nicht fa (das ist die Syntax der alten Version vier).

Kann ich Font Awesome ohne WordPress nutzen?

Ja, Font Awesome ist nicht an WordPress gebunden. Binden Sie den CDN-Link im <head> eines beliebigen HTML-Dokuments ein und fügen Sie Icons mit dem Tag <i class="fa-solid fa-name"></i> ein. Es funktioniert mit React, Vue, Laravel, reinem HTML und sogar PDF-Generatoren. Unter fontawesome.com/docs finden Sie Anleitungen für ein Dutzend Plattformen.

Warum ist Font Awesome besser als andere Icon-Bibliotheken?

Zwei Hauptargumente: Community-Größe und Kompatibilität. Font Awesome wird von Millionen Websites genutzt, daher ist die Dokumentation in ein Dutzend Sprachen übersetzt, und Antworten auf alle Probleme finden Sie per Suche in Sekunden. Zweitens das offizielle WordPress-Plugin mit automatischer Konfliktlösung: Das bieten weder Material Icons noch Bootstrap Icons.

Lohnt sich der Aufwand: Was Sie für Ihre Aufgabe wählen sollten

Wenn Sie bis hierhin gelesen haben, spart Ihnen die folgende Tabelle Zeit:

Prüfen Sie nach der Einbindung, ob die Icons in verschiedenen Browsern und auf Mobilgeräten korrekt dargestellt werden. Wenn Sie Flackern oder Icon-Ersetzungen bemerken, führen Sie den Konfliktscanner aus dem Abschnitt „Fehlerbehebung" in den Plugin-Einstellungen aus. Das Problem ist fast immer mit einem Klick gelöst.