Icons für Alle: So nutzt du Font Awesome mit WordPress

Font Awesome ist einer der beliebtesten Iconfonts weltweit. Mittlerweile nutzen über 60 Millionen Websites den Font, um Icons in allen Farben und Varianten darzustellen. Unter diesen 60 Millionen Websites sind unter anderem whitehouse.gov, thebeatles.com und washingtonpost.com zu finden. In diesem Artikel zeigen wir dir, wie du die Icons für deinen Blog nutzen kannst.

Font Awesome bietet dir zurzeit über 30.000 Icons für alle möglichen Einsatzzwecke, in der freien Version sind es immerhin noch 2.000+ Icons. Du kannst zum Beispiel Social-Follow-Icons damit erstellen, wie ich es auf meinem Blog getan habe.

Die Vorteile des Icon-Fonts Font Awesome

Ein Icon-Font bietet dir gegenüber verwendeten Grafiken große Vorteile. Die Icons können wunderbar skaliert und daher in jeder gewünschten Größe angezeigt werden. Zudem kannst du sie so farblich anpassen, dass sie die von dir gewünschten Farben haben.

Das kann zum Beispiel für eine Business-Website wichtig sein, wenn es eine Corporate Identity zu befolgen gilt. Die Anpassung erfolgt über CSS. Daher ist alles möglich, was mit CSS realisiert werden kann. Die Größe, die Farben, Text-Shadow und vieles andere ist machbar.

Auf der folgenden Seite kannst du alle 30.000 Icons in einer Übersicht anschauen.

Font Awesome im eigenen Theme einsetzen, so gehts

Du hast gleich zwei Optionen, wie du den Font in deinem Theme einsetzen kannst. Ich stelle sie dir nach und nach vor. Hierbei kommt es auch darauf an, ob du ein Freund von Plugins oder Handarbeit bist. Für beide Vorlieben findest du die richtige Methode in diesem Beitrag.

1 – Die Handarbeit. Wir verlinken nur die CSS-Datei

Bevor du die Icons einsetzen kannst, benötigst du das CSS für den Icon-Font. Der CDN-Dienstleister KeyCDN hat den Font auf seinen Servern gehostet. So reicht eine einfache Verlinkung der Datei im Header deiner Website. Das erledigt ein kleines Code-Schnipselchen, dass du in die functions.php deines Themes kopieren musst.

Du kannst zwischen zwei Methoden auswählen. Code Nummer eins verlinkt die CSS-Datei im Header deines Blogs. Code zwei ist ideal, wenn du deine Website auf Speed optimieren möchtest. Die Datei wird dann in den Footer geladen.

https://gist.github.com/anonymous/b4b2ce4d8af44503e501f70f86f3173b

https://gist.github.com/anonymous/27c9e331dd9a08a59cbc863bb31f4a17

Nun kannst du die Icons bereits einsetzen. Du hast zwei Möglichkeiten für den händischen Einsatz. Möglichkeit Nummer eins ist der <i> Tag, den uns Font Awesome für jedes Icons zur Verfügung stellt. Du kannst dir eine Menge Beispiele auf der »Examples«-Seite anschauen.

Du bist jedoch nicht an den <i> Tag gebunden, sondern kannst die Icons auch im CSS definieren und einsetzen. Das ist sehr nützlich in Bereichen, die kein zusätzliches Markup vertragen. Less und Sass werden übrigens ebenso unterstützt wie reines CSS.

Wenn du ein Icon auf der Übersichtsseite von Font Awesome anklickst, kommst du auf die Seite, wo der spezielle <i> Tag angezeigt wird. Oberhalb davon steht auch der sogenannte Unicode, den du für den Einsatz in der CSS-Datei benötigst.

Ein Teil meines CSS für die Social-Follow-Buttons (Screenshot oben) sieht folgendermaßen aus:

https://gist.github.com/anonymous/791df49ad67685ccdfbf5558d657091b

Hier findest du den Unicode:

Den Icon-Font im WordPress-Editor einsetzen

Natürlich kannst du die schicken Icons auch direkt im WordPress-Editor nutzen, wenn du deine Beiträge schreibst. Dazu musst du nur kurz in den Text-Bereich gehen und den betreffenden <i> Tag dort einfügen, wo er erscheinen soll.

Gehe auf die Übersichtsseite von Font Awesome, such dir ein Icon aus und klicke darauf. Auf der nächsten Seite findest du den richtigen Tag für das Icon.

Vielleicht in dieser Überschrift?

2 – Alles Easy. Wir nutzen das Plugin »Better Font Awesome«

• Entwickler: Mickey Kay
• Wird ständig weiter entwickelt: Ja
• Letzte Version vom: 01.06.2016
• Kosten: kostenfrei über WordPress.org
• Lizenz: GNU GENERAL PUBLIC LICENSE
• Wechselwirkungen mit anderen Plugins: nicht bekannt
• Entwickler-Homepage: Nicht bekannt
• Download von WordPress.org

Der Einsatz dieses Plugins wird deinen Blog nicht großartig verlangsamen, denn die benötigte CSS-Datei wird vom jsDelivr CDN geladen. Das Plugin ist hervorragend geeignet für Einsteiger in WordPress, da es keine Programmier-Kenntnisse verlangt.

Der Einsatz der einzelnen Icons ist mit diesem Plugin sehr einfach. Es bieten sich dir gleich drei Möglichkeiten, die Icons zu benutzen.

Nummer 1: Direkt im Editor von WordPress mit einem komfortablen Generator.

 

Nummer 2: Der Einsatz von Shortcodes

[icon name="flag" class="2x spin border"]

Nummer 3: Der bekannte HTML-Tag

<i class="fa fa-check-square-o" aria-hidden="true"></i>

Die Einstellungen des Plugins:

Die Einstellungen findest du unter »Einstellungen => Better Font Awesome«.

Hier kannst du auswählen, welche Version von Font Awesome du nutzen möchtest. Empfehlenswert ist immer die neueste Version – zurzeit ist das Version 4.6.3. Die zweite Option sorgt für eine komprimierte CSS-Datei, die schneller lädt. Das solltest du anhaken.

Die dritte Option sorgt dafür, dass andere Font Awesome Dateien, die von anderen Plugins genutzt werden, von „Better Font Awesome“ entfernt werden. Auch das solltest du anhaken, den eine Version der Datei reicht vollkommen aus.

Der vierte Bereich in den Einstellungen ist eine Hilfe für dich, wenn du den Shortcode oder den HTML-Tag einsetzen möchtest.

Aber es gibt da noch die JavaScript-Version

Richtig. Die gibt es. Unter dem Menüpunkt »Get started« kannst du deine E-Mail-Adresse eintragen und dir einen JavaScript-Code zuschicken lassen, der den Icon-Font immer aktuell hält.

Allerdings hat dieser Code einen enormen Nachteil. Auch wenn du nach einer Registrierung dafür sorgen kannst, dass der Code asyncron ausgeliefert wird, so lädt er doch recht langsam. Ich habe es direkt für diesen Beitrag ausprobiert und war nicht überzeugt. Meine Website wurde um 400 Millisekunden langsamer als mit der verlinkten CSS-Datei.

Ich kann diese Variante daher nicht empfehlen.

Fazit

Nun hast du gleich zwei Möglichkeiten kennengelernt, um die schicken Icons von Font Awesome nutzen zu können. Ob dir nun die manuelle Version oder der Einsatz eines Plugins besser gefällt, musst du selbst entscheiden. Zu empfehlen sind beide Varianten – mit Ausnahme der JavaScript-Version.