WordPress: Icons einfügen einfach erklärt

Um einen Text in WordPress mit Icon Fonts aufzulockern, gibt es verschiedene Methoden: Nutzen Sie ein WordPress-Plugin für Icon Fonts, das es zum Beispiel von Font Awesome gibt. Über das Plugin lassen sich auch Shortcodes zum Einfügen der Icons verwenden. Oder betten Sie die Icon Fonts manuell per Embed Code ein – einzelne Fonts oder ganze Sets (zum Beispiel auch von Fonts Awesome). Falls Sie nur wenige Standard-Icons benötigen, können Sie auch die aus Page Buildern oder Dashicons verwenden.

Icon Fonts sind einzelne Piktogramme und Symbole, die Sie auf Ihrer Website einfügen können und die dort zur Navigation oder Auflockerung des Textes genutzt werden. Der große Unterschied zu anderen Icons bei WordPress ist, dass Icon Fonts wie eine gewöhnliche Schriftart angelegt sind. Statt Buchstaben, Zahlen oder Sonderzeichen enthält diese dann einfach die kleinen Symbole.

Die Vorteile dieser Methode sind groß. Zum einen erleichtert sie die Verwendung, wenn die Piktogramme als Schrift hinterlegt sind. Zum anderen sind diese Icons bei WordPress, genau wie eine herkömmliche Schrift, frei skalierbar und können beliebig eingefärbt werden. Dazu laden Icon Fonts schneller als einzelne Grafiken.

Es gibt zahlreiche Anbieter, die Icons für WordPress zur Verfügung stellen. Viele davon sind kostenlos. Die weltweit wohl beliebteste Seite für freie Icon Fonts ist Font Awesome. Weit über 7.500 Icons finden sich dort. Von simplen Pfeilen oder gängigen Symbolen wie Einkaufswagen und Lupe bis zu speziellen Themengebieten reicht die Palette.

Wenn Sie für Ihre WordPress-Seite die passenden Icons gefunden haben, gibt es verschiedene Möglichkeiten, diese einzufügen. Eine einfache Methode ist die Einbindung über ein Plugin. Für Font Awesome beispielsweise gibt es ein eigenes Integrations-Plugin namens Better Font Awesome. Mit diesem können Sie über die Verwendung eines Shortcodes Icons bei WordPress einfügen. Das Plugin stellt dafür stets die neusten Icon-Sets zur Verfügung und benötigt somit keine manuellen Updates. Die Verwendung ist einfach: einmal installiert, erlaubt Ihnen das Plugin über den Shortcode icon name="Beispiel" die Auswahl und Einbindung beliebiger Icons. Die unterschiedlichen Piktogramme stehen aber auch im Texteditor zur Auswahl.

Sie können bei WordPress Icons auch manuell einfügen. Font Awesome stellt Ihnen zu diesem Zweck die entsprechende Font als Embed Code zur Verfügung. Das funktioniert wie folgt:

1. Hinterlegen Sie Ihre E-Mail-Adresse bei Font Awesome. An diese wird der Embed Code gesendet.
2. Legen Sie dann ein Backup Ihrer Website an. Da Sie in den Code eingreifen, ist es wichtig, dass Sie eine Sicherheitskopie haben.
3. Nun fügen Sie den Code in den Header Ihres Themes ein. Das funktioniert entweder über die header.php-Datei oder bei einigen Themes sogar direkt im Backend. Der Embed Code wird direkt vor eingesetzt.
4. Jetzt können Sie jene Icons für WordPress auswählen, die Sie für Ihre Seite benötigen.

Alternativ downloaden Sie die gewünschte Icon-Sammlung direkt bei Font Awesome:

1. Im ersten Schritt entpacken Sie die enthaltene ZIP-Datei. Darin finden Sie auch eine Datei namens all.css.
2. Nutzen Sie FTP, um sich mit dem Server Ihrer Seite zu verbinden. Dort finden Sie einen Ordner mit dem Namen „fonts“.
3. In diesem Ordner erstellen Sie einen Unterordner mit dem Namen „Font Awesome“ und darin einen weiteren Unterordner mit dem Titel „css“. Dort fügen Sie die Datei all.css ein.
4. Öffnen Sie die Datei header.php Ihres Themes und fügen Sie folgenden Code vor ein:

Ähnlich übersichtlich verhält es sich mit Dashicons. Diese Icons sind bei WordPress Standard und können mit einem Plugin eingefügt werden. Dafür kopieren Sie auf der Website einfach den Code eines Icons und fügen diesen im Backend ein. Zwar stehen vergleichsweise wenig Icons für Ihre WordPress-Seite zur Verfügung; Klassiker wie E-Mail-Symbole, die Logos der verschiedenen Social-Media-Plattformen oder einen Einkaufswagen finden Sie aber auch hier.

Wenn Sie Icons in WordPress einfügen möchten, haben Sie also verschiedene Optionen, die alle vergleichsweise einfach funktionieren. Icon Fonts bieten zahlreiche Vorteile gegenüber Grafiken, weshalb sie eine lohnende Option sein können. Wichtig ist, dass Sie Icons immer nur sparsam einsetzen. Andernfalls wird Ihre Seite schnell unruhig. Ein WordPress-Favicon und dazu einige wenige Icons auf den einzelnen Seiten reichen völlig aus.