WordPress: Icons einfügen einfach erklärt

Um einen Text in WordPress mit Icon Fonts auf­zu­lo­ckern, gibt es ver­schie­de­ne Methoden: Nutzen Sie ein WordPress-Plugin für Icon Fonts, das es zum Beispiel von Font Awesome gibt. Über das Plugin lassen sich auch Short­codes 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 Pik­to­gram­me und Symbole, die Sie auf Ihrer Website einfügen können und die dort zur Na­vi­ga­ti­on oder Auf­lo­cke­rung des Textes genutzt werden. Der große Un­ter­schied zu anderen Icons bei WordPress ist, dass Icon Fonts wie eine ge­wöhn­li­che Schrift­art angelegt sind. Statt Buch­sta­ben, Zahlen oder Son­der­zei­chen enthält diese dann einfach die kleinen Symbole.

Die Vorteile dieser Methode sind groß. Zum einen er­leich­tert sie die Ver­wen­dung, wenn die Pik­to­gram­me als Schrift hin­ter­legt sind. Zum anderen sind diese Icons bei WordPress, genau wie eine her­kömm­li­che Schrift, frei ska­lier­bar und können beliebig ein­ge­färbt werden. Dazu laden Icon Fonts schneller als einzelne Grafiken.

Es gibt zahl­rei­che Anbieter, die Icons für WordPress zur Verfügung stellen. Viele davon sind kostenlos. Die weltweit wohl be­lieb­tes­te 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 Ein­kaufs­wa­gen und Lupe bis zu spe­zi­el­len The­men­ge­bie­ten reicht die Palette.

Wenn Sie für Ihre WordPress-Seite die passenden Icons gefunden haben, gibt es ver­schie­de­ne Mög­lich­kei­ten, diese ein­zu­fü­gen. Eine einfache Methode ist die Ein­bin­dung über ein Plugin. Für Font Awesome bei­spiels­wei­se gibt es ein eigenes In­te­gra­ti­ons-Plugin namens Better Font Awesome. Mit diesem können Sie über die Ver­wen­dung eines Short­codes 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 Ver­wen­dung ist einfach: einmal in­stal­liert, erlaubt Ihnen das Plugin über den Shortcode icon name="Beispiel" die Auswahl und Ein­bin­dung be­lie­bi­ger Icons. Die un­ter­schied­li­chen Pik­to­gram­me stehen aber auch im Text­edi­tor zur Auswahl.

Sie können bei WordPress Icons auch manuell einfügen. Font Awesome stellt Ihnen zu diesem Zweck die ent­spre­chen­de Font als Embed Code zur Verfügung. Das funk­tio­niert wie folgt:

1. Hin­ter­le­gen 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 ein­grei­fen, ist es wichtig, dass Sie eine Si­cher­heits­ko­pie haben.
3. Nun fügen Sie den Code in den Header Ihres Themes ein. Das funk­tio­niert entweder über die header.php-Datei oder bei einigen Themes sogar direkt im Backend. Der Embed Code wird direkt vor ein­ge­setzt.
4. Jetzt können Sie jene Icons für WordPress auswählen, die Sie für Ihre Seite benötigen.

Al­ter­na­tiv down­loa­den Sie die ge­wünsch­te Icon-Sammlung direkt bei Font Awesome:

1. Im ersten Schritt entpacken Sie die ent­hal­te­ne 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 Un­ter­ord­ner mit dem Namen „Font Awesome“ und darin einen weiteren Un­ter­ord­ner 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 über­sicht­lich 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 ver­gleichs­wei­se wenig Icons für Ihre WordPress-Seite zur Verfügung; Klassiker wie E-Mail-Symbole, die Logos der ver­schie­de­nen Social-Media-Platt­for­men oder einen Ein­kaufs­wa­gen finden Sie aber auch hier.

Wenn Sie Icons in WordPress einfügen möchten, haben Sie also ver­schie­de­ne Optionen, die alle ver­gleichs­wei­se einfach funk­tio­nie­ren. Icon Fonts bieten zahl­rei­che Vorteile gegenüber Grafiken, weshalb sie eine lohnende Option sein können. Wichtig ist, dass Sie Icons immer nur sparsam einsetzen. An­dern­falls wird Ihre Seite schnell unruhig. Ein WordPress-Favicon und dazu einige wenige Icons auf den einzelnen Seiten reichen völlig aus.