So nutzt du Icon-Fonts in WordPress

Iconfonts sind eine wirklich wunderbare Sache, denn sie bieten eine Menge Vorteile, die normale Icons nicht bieten können. Da es sich technisch um Schriftarten handelt und nicht um Bilder, haben die aus den Fonts generierten Icons nicht die Nachteile klassischer Icons. Farben und Größen der Font-Icons lassen sich leicht über CSS und HTML steuern. Sie sind somit skalierbar und ohne weiteres auch für Retina-Displays zu nutzen. In diesem Beitrag beschäftigen wir uns mit der Frage, wie du am geschicktesten Icon-Fonts in WordPress nutzen kannst.

So nutzt du Icon-Fonts in WordPress

Zwei Möglichkeiten, um Iconfonts in WordPress zu nutzen

Der beliebteste und umfangreichste Iconfont ist sicherlich »Font Awesome«, und genau diesen Font werden wir in diesem Artikel nutzen. Font Awesome stellt dir 605 Icons für fast alle denkbaren Einsatzzwecke bereit und ist sehr einfach zu integrieren und zu nutzen. Ich stelle dir heute zwei Möglichkeiten der Integration des Fonts vor, einmal die manuelle Methode und die Integration mittels eines Plugins.

Wichtige Links:

Font Awesome

Font Awesome manuell nutzen

Font Awesome manuell zu nutzen, bietet dir den Vorteil höherer Performance. Deine Website wird nicht durch unnötige CSS- und JavaScript-Dateien verlangsamt. Es muss nur eine einzige CSS-Datei eingebunden werden, die über den CDN-Server von MaxCDN ausgeliefert wird. Natürlich kannst du dir auch die nötigen Dateien auf deinen Server laden, doch die Einbindung über MaxCDN wird letztendlich schneller und performanter sein. Kopiere folgenden Code in die functions.php deines Themes:

Ein Klick auf die Grafik öffnet das Gist bei GitHub
font-awesome-einbinden

Mehr ist nicht nötig, um den Font nutzen zu können. Möchtest du nun ein Icon anzeigen, gehst du auf die Webseite von Font Awesome und schaust dir die Beispiele an, um dich mit der Nutzung vertraut zu machen. Du wirst feststellen, dass diese Icons sehr wandelbar und vielfältig einzusetzen sind. Die Größe der Icons bestimmst du ganz einfach per HTML, das du in die Textansicht des WordPress-Editors eingeben kannst:

Beispiel

Editor

Das Ergebnis:

Das Ergebnis

Quick-Tipp:

Übrigens, der <i> Tag ist nicht unbedingt nötig, es funktioniert durchaus auch mit einem <span>, <p> oder <div> Element. Die farblichen Anpassungen kannst du ganz einfach per CSS gestalten. Auch die Größe lässt sich noch anpassen, ändere dafür einfach die Schriftgröße.

css-iconfonts

Font Awesome mit einem Plugin nutzen

Fontallic

  • Entwickler: Verschiedene
  • Wird ständig weiter entwickelt: Geht so
  • Letzte Version vom: vor einem Jahr
  • Kompatibilität mit WordPress 4.4.1: Vollständig
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage: Nicht bekannt
  • Download von WordPress.org

Das Plugin »WP Fontallic Easypromoweb« bietet dir den Vorteil, dass es neben dem Font Awesome noch weitere Icon Fonts integriert hat. 2553 Icons kannst du mit diesem Plugin nutzen. Dank des visuellen Editors musst du nicht mehr in den Textbereich deines WordPress-Schreibeditors, sondern kannst die Icons etwas einfacher über einen zusätzlichen Button des Schreibeditors einbauen.

Der Button für die Icon-Fonts

Ein Klick auf den Auswahlbutton öffnet eine Auswahlliste für die Icons.

Die Auswahl der Icons

Die Piktogramme lassen sich über Schriftgröße und Farbe weiter anpassen. Allerdings ist es über den visuellen Editor nicht möglich, die Icons speziellen HTML-Elementen zuzuordnen. Dazu muss man wieder in den Textbereich des Editors gehen und die Symbole manuell zuordnen.

Icons im Texteditor

Das Ergebnis auf der Website

Ergänzung: Die Iconfonts auf dem eigenen Server hosten

Die beiden Möglichkeiten, die ich oben vorgestellt habe, bestechen durch ihre Einfachheit. Es ist nicht viel Arbeit nötig, um die vielen Vorteile der Fonts nutzen zu können. Doch natürlich kann man den Iconfont auch auf seinem Server/dem Webhostingpaket selbst hosten. Bei anderen Fonts als Font Awesome ist das sogar nötig zur Verwendung. Daher gehen wir die dafür nötigen Schritte noch einmal durch. Zuerst muss das jeweilige Download-Paket, hier am Beispiel von Font Awesome, heruntergeladen werden.

Im Anschluss wird die .ZIP-Datei entpackt. Der Ordner „fonts“, der die nötigen Schriftarten enthält, wird in das Root-Verzeichnis des aktiven Themes per (S)FTP hochgeladen. Aus dem Ordner „css“ wird das „font-awesome.css“ herausgenommen. Die Datei-Pfade zu den Schriftarten im Fonts-Ordner müssen noch angepasst werden auf (Beispiel) url('fonts/fontawesome-webfont.eot?v=4.5.0');. Danach kommt das CSS in das Root-Verzeichnis des Themes und wird im Header des Themes referenziert. Das geschieht durch folgenden Eintrag in der functions.php des Themes:

Ein Klick auf die Grafik öffnet das Gist bei GitHub
Das Font Awesome CSS in den Header des Themes bringen

Fazit

Iconfonts sind eine wunderbare Sache und ich nutze sie gern. Mein Favorit ist Font Awesome, besonders auch, weil ich nur eine Datei über das CDN einbinden muss. Meiner Meinung nach ergibt ein Plugin nicht viel Sinn, da die manuelle Nutzung fast schneller geht und man für die Zuordnung von Icons für Listen, Buttons und ähnlichem doch in den Textbereich des Schreibeditors muss.

Wer sich nicht an den Code ran traut, ist natürlich mit dem Plugin ähnlich gut bedient.

(dpe)

ist freier Journalist, Spezialist für WordPress und WordPress Sicherheit und schreibt seit 2012 für Dr. Web. Nebenbei ist er Autor mehrerer E-Books zu den Themen Lebenshilfe, Marketing und WordPress. Auf seinem Blog TechBrain.de schreibt er über das Schreiben und Bloggen und veröffentlicht nützliche WordPress-Snippets.

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen