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.

Mehr als nur eine Domain!

Hier finden Sie Ihre perfekte Domain - z.B. .de Domain + persönlicher Berater

E-Mail-Postfach
24/7 Support
Wildcard SSL

Was sind Icon Fonts?

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.

Tipp

Ihre eigene Domain in wenigen Schritten: bei IONOS registrieren Sie Ihre Traum-Domain ganz einfach und nutzen dann zahlreiche Vorteile. Dazu zählen u. a. ein erweiterbares 2 GB großes Postfach, bis zu 10.000 Subdomains und Domain Lock.

Wo gibt es Icon Fonts für WordPress?

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.

Icons in WordPress einfügen mit einem Plugin

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.

Tipp

WordPress-Hosting leicht gemacht: Bei IONOS wählen Sie einfach den Tarif, der zu Ihren Anforderungen passt, und erhalten so den perfekten Support für eine oder mehrere WordPress-Seiten.

Icons manuell bei WordPress einfügen

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:
<link href="https://www.beispielseite.de/themes/beispieltheme/fonts/fontawesome/css/all.css" rel="stylesheet">

WordPress-Icons mit Page Builder und Dashicons: weniger Auswahl, einfache Handhabung

Die dritte Option, mit der Sie bei WordPress Icons einfügen können, ist die einfachste. Einige beliebte und verbreitete Page Builder für WordPress verfügen über eigene Icon-Sammlungen. Dazu gehören z. B. Beaver Builder oder Elementor Pro. Hier sind die Icons einfach als Schrift hinterlegt, lassen sich auswählen und dann per Drag-and-Drop einfügen.

Der Nachteil: Das Angebot ist im Vergleich zu den umfassenden Sammlungen bei Font Awesome und Co. sehr begrenzt und lässt wenig Spielraum für den eigenen Stil. Wenn Sie allerdings nur wenige Icons benötigen, reicht diese Methode.

Ä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.

Managed WordPress-Hosting mit IONOS!

Schneller, einfacher und sicherer. Hochgradig optimiertes WordPress-Hosting mit IONOS!

Kostenlose Domain
SSL-Zertifikat
24/7 Support

Fazit: Icons für WordPress sind nützlich und leicht zu integrieren

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.

Tipp

Im Digital Guide von IONOS finden Sie alles Wichtige zum Thema WordPress. Von ersten Schritten bei der Erstellung eines eigenen WordPress-Blogs über die besten WordPress-Review-Plugins bis zur Erstellung eines WordPress-Backups erfahren Sie hier, wie Sie WordPress am effektivsten für sich nutzen können.