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

Der Dr. Web Font Awesome WordPress Guide

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er...

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.

Der Dr. Web Font Awesome WordPress Guide

Font Awesome bietet dir zurzeit 634 Icons für alle möglichen Einsatzzwecke. Du kannst zum Beispiel Social-Follow-Icons damit erstellen, wie ich es auf meinem Blog getan habe.

social-follow-icons

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

E-Book Effektives Online Marketing von Andreas Hecht

E-Book: Effektives Online Marketing

Entdecke die Power des perfekten Online-Marketings für deine Website. Du erfährst neue Techniken, die deine Website automatisch besser ranken lassen und die dir nach und nach einen Expertenstatus verleihen werden. [...]

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.

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.

So einfach passt du die Größe der Icons an.

So einfach passt du die Größe der Icons an.

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:

Hier findest du den Unicode:

font-awesome-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?

font-awesome-einsatz

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

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.

screenshot-1

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

Die Einstellungen von 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.

font-awesome-install

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.

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er schreibt seit 2012 für Dr. Web. Auf seinem Blog veröffentlicht er unter anderem nützliche WordPress-Snippets.

Sortiert nach:   neueste | älteste | beste Bewertung
Sebastian
Gast

Danke für diesen Vergleich!

Als Ergänzung vielleicht noch: die Verwendung von Icon-Fonts bringt diverse Nachteile gegenüber SVG Grafiken.

Daher würde ich für die Verwendung einzelner Grafiken aus font-awesome auf diese als SVG exportierten zurückgreifen:

https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg

Oder man kann sich über die Web-App von IcoMoon die gewünschten Icons zusammenklicken und mit verschiedenen Optionen zum Einbinden herunterladen:

https://icomoon.io/app/

Vielleicht für den ein oder anderen nützlich.

Viele Grüße

Sebastian

Andreas Hecht
Gast

Danke Dir für die Ergänzung.

ati
Gast

Welche Nachteile?

Sebastian
Gast

Hallo,

hier ist ein Artikel mit einigen Vergleichen:

https://css-tricks.com/icon-fonts-vs-svg/

Viele Grüße

Sebastian

ati
Gast

Genial, Danke!

wpDiscuz