Wie du mit Iconfonts und Wordpress prachtvolle Inhalte erstellst

Leserfrage:

„Wie bekomme ich Icons und Symbole in eine Überschrift“?

„Oh, das ist einfach, wenn du einen Iconfont benutzt“.

Inhalt

Iconfonts und [icon id=“wordpress“] Wordpress

Früher gab es nur eine sinnvolle Möglichkeit Icons einzusetzen, man verwendete eine Bilddatei. Iconsammlungen wurden deshalb mit Grafiken in verschiedenen Größen geliefert. Damit musste man auskommen. Heute geht viel mehr.

Sprites und SVG heißen solche Zauberworte. Da man längst beliebige Fonts in Blogs einbinden kann, sofern man über die entsprechenden Lizenzen verfügt, sind auch die guten alten Dingbats möglich. Außerdem können Emojis zum Einsatz kommen. Die funktionieren immer besser und ordentlich Auswahl hat man auch. Ich setze sie immer häufiger für die Seitentitel ein.

An dieser Stelle möchte ich mich aber auf Iconfonts beschränken. Weil sie so einfach zu benutzen sind. Mehr braucht man in der Regel auch gar nicht.

Was ist ein Iconfont? Eine Schriftart (Font), die statt Buchstaben und Zeichen eben Icons enthält. Man setzt sie genau so ein, wie man es mit einer beliebigen Schrift tut. Das heißt, man kann Größen, Farben, Schatten, Hintergründe verändern, kann Unterstreichungen und so weiter benutzen.

Iconfonts sind herkömmlichen Grafiken überlegen. Sie sind flexibler, beliebig skalierbar und passen sich modernen Techniken besser an (Stichwort Retina & Responsive). Icon Fonts sehen immer gut aus, egal welchen Bildschirm der Besucher hat. Grafiken sind im Zweifel allerdings immer noch ein ganzes Stück prächtiger.

Alles, was man mit CSS machen kann, kann man auch mit Iconfonts tun. Das ist nicht mal wenig. Allerdings geht es mir an dieser Stelle nicht um spezielle Basteleien, wie man sie zum Beispiel auf codepen.io finden kann. Iconfonts lassen sich nämlich auch animieren, mehrfarbig darstellen oder als Hintergrundgrafiken verwenden. Spannende Sachen, aber dann doch eher für Fortgeschrittene.

H3 Überschrift mit [icon id=“wordpress“] Wordpress Icon

Im Fließtext [icon id=“wordpress“] mit Farbe.

Im Fließtext [icon id=“wordpress“] ohne Farbe.

[icon id=“wordpress“] 200% Textgröße
[icon id=“wordpress“] 500% Textgröße
[icon id=“wordpress“] 80px Textgröße
Oder hier zum Beispiel mit Rahmen und Hintergrundfarbe

[icon id=“wordpress“]

Der bekannteste Iconfont ist Font Awesome. Es gibt ihn mittlerweile in der vierten Inkarnation. Satte 989 Icons sind in der Gratisversion des Fonts enthalten (Stand 04/2018) – 1718 gibts dazu noch gegen Bezahlung. Damit lässt sich einiges auf die Beine stellen. Font Awesome ist anwendungsfreundlicherweise Open Source und auch bei Benutzung in kommerziellen Produkten völlig kostenlos. Es gibt Updates, neue Icons kommen in unregelmäßigen Abständen hinzu.

Es gibt mehr. Einige bekannte Beispiele:

Genericons
IcoMoon
Fontastic
Octicons
Typicons
Payment Webfont
Foundation
We Love Icon Fonts – ein Icon Fonts Hosting Service

Wordpress Plugins für das Blog

Icon Fonts können auf klassische Weise verwendet werden. Dazu wird der Font aus einer geeigneten Quelle importiert und das gewünschte Bild per CSS eingefügt. Wordpress hat für so etwas natürlich Plugins. Man muss nichts manuell einbinden und kann das gewünschte Icon bequem über den Editor auswählen und einfügen.

Tatsächlich nutzt Wordpress sogar schon von Haus aus einen Iconfont. Die sogenannten Dashicons, man findet sie im Admin Menü, manche Themes verwenden sie zur illustrativen Unterscheidung von Formatvorlagen oder für das Hamburg Icon in mobilen Menüs. Leider lassen sich diese Icons nicht direkt innerhalb eines Postings verwenden. Wer sich trotzdem daran versuchen will, hier ist eine Anleitung.

Plugins werden reichlich angeboten. Erforsche das Plugin Directory, um noch mehr aufzuspüren. Alle unten erwähnten Plugins sind kostenlos und auf englisch.

WP Visual Icon Fonts
Stellt Icons aus Font Awesome und Genericons in einem Dropdown-Menü zur Verfügung.

Noch wilder treibt es Icon Fonts, hier werden gleich 18 Iconsets bereitgestellt.

Better Font Awesome
muss gar nicht gross erklärt werden. Auch diese Plugin klinkt sich in die Menüleiste des Editors ein und macht auf diese Weise Font Awesome verfügbar.

AGP Font Awesome Collection
Der Font Awesome Constructor bietet einen Eingabemaske in der man sich Icons und Buttons zusammenklicken kann. Das klingt prima, gerade für weniger erfahrene Blogger. Allerdings verwirrt die Vielzahl der Optionen wohl mehr, als sie nützt.

Font Awesome 4 Menus
erlaubt es Icons in den Wordpress Menüs unterzubringen. Das habe ich auch probiert und oben in der Hauptnavigation bei Conterest Icons eingefügt. Schau es dir hier live an. Eine ähnliche Funktion bietet Menu Icons – mit noch größerer Auswahl.

Haben Iconfonts Nachteile?

Die zusätzliche Datei muss stets geladen werden. Man wird das selbst kaum bemerken, doch solche Dinge sammeln sich an. Das läppert sich. Ob man den Einsatz rechtfertigen kann, muss jeder selbst entscheiden. Wenn dein Blog flott unterwegs ist, mag der zusätzliche Font nicht ins Gewicht fallen. Mich stört es hier jedenfalls nicht.
Die größere Gefahr versteckt sich in den Shortcodes. Will man das Plugin oder den Font wechseln oder muss das vielleicht sogar, dann würden die Shortcodes in den Postings zurückbleiben. Dessen sollte man sich bewusst sein. Die Codes müssen unter Umständen mit Suchen & Ersetzen entfernt werden – jedenfalls bei häufigem Gebrauch.
Auch bei der automatischen Weiterverarbeitung von Beiträgen oder Texten können die Shortcodes stören. Sie werden dann nicht mit in ein Icon übersetzt, sondern als sinnloser Quellcode dargestellt.
Alte Browser zeigen die Icons nicht an. Das softwaretechnische Alteisen versagt aber auch in vielen anderen Dingen.
Vorlesesoftware kann Probleme mit Iconfonts bekommen.

SVG

Einige Leute meinen, dass Iconfonts ihre Zeit schon hinter sich haben. Man solle auf SVG setzen. SVG, das sind grafische Elemente, die als Quellcode beschrieben werden. Es sind also keine Bilder, die man separat abspeichern muss, sondern Codes innerhalb einer Seite, die der Browser interpretiert – so wie HTML und CSS auch.

Man kann die Grafiken einzeln handhaben, braucht also keinen Font. SVG ist bestens skalierbar und für hochauflösende Retina-Displays geeignet. Gegen SVG spricht derzeit nur, dass die Browser nicht immer mitkommen. Auch die Auswahl ist noch gering. Für Wordpress gibt es ein passendes Plugin, es heißt WP SVG Icons und enthält fast 500 Icons.