Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →
Dr. Web » WordPress » Icons für Alle: So nutzt du Font Awesome mit WordPress

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

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 5 Kommentare
Lesedauer: 5 Minuten
  • von Markus Seyfferth
  • 27. September 2016

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.

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.

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:

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

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.

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Khoa Nguyen SEO München Logo

Khoa Nguyen – Online Marketing Freelancer

München

CAF chris and friends berlin Logo.

CAF Webdesign Agentur

Berlin

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

Andrea Becker Design Logo.

design andrea becker

Frankfurt am Main

Trendmarke Logo.

Trendmarke GmbH

Stuttgart

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
Junger Mann, der in einer SEO-Agentur arbeitet arbeitet und in die Kamera lächelt.
SEO

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Inhaber einer WordPress-Agentur, am Tisch sitzt und in die Kamera schaut.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

5 Antworten

  1. Sebastian sagt:
    27. September 2016 um 14:56 Uhr

    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

    Antworten
    1. Andreas Hecht sagt:
      27. September 2016 um 14:58 Uhr

      Danke Dir für die Ergänzung.

    2. ati sagt:
      28. September 2016 um 11:48 Uhr

      Welche Nachteile?

    3. Sebastian sagt:
      28. September 2016 um 13:02 Uhr

      Hallo,

      hier ist ein Artikel mit einigen Vergleichen:

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

      Viele Grüße

      Sebastian

    4. ati sagt:
      28. September 2016 um 13:20 Uhr

      Genial, Danke!

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑