Über 2481 Icons mit WordPress nutzen (Fontawesome)

von | 20.03.2018 | 0 Kommentare

Icons sind eine echt interessante Geschichte und können das Design einer Website dezent aufwerten. Einige Themes, wie Divi, bringen bereits Icon-Fonts mit, nur können diese meist nur über bestimmte Module genutzt werden. Mit Fontawesome lassen sich Icons fast überall platzieren und die Auswahl ist riesig. Übrigens ist die Nutzung kostenlos, es gibt auch einen Premium-Service mit einer größeren Auswahl, aber benötigt habe ich diesen bislang nicht.

Wer sich ansehen möchte, wie das ganze live aussieht, kann die CoinUpdate Website besuchen. Hier ein Screenshot der eingebundenen Icons:

Fontawesome-mit WordPress einbinden

Fontawesome integrieren

Mit WordPress lässt sich Fontawesome eigentlich ganz einfach integrieren. Je nach Theme ist das Vorgehen jedoch unterschiedlich und leider kann ich aufgrund der Vielzahl an Themes, nicht auf jedes einzeln eingehen. Da sich dieser Blog um das Divi Theme dreht, werde ich im Folgeneden zeigen, wie die Icon-Font mit dem Divi Theme* eingebunden wird. Wenn ihr ein anders Theme verwendet, dann erkundigt euch einfach wie der Code in den Bereich „head“ einbinden könnt

Fontawesome mit Divi nutzen

Um Fontawesome mit dem Divi Theme einzubinden, gehen wir zum Punkt Divi > Theme-Optionen > Integration und und fügen folgenden Code in den Bereich „head“ ein:

Divi-code-in-head-einbinden

Damit ist die halbe Arbeit schon getan!

Jetzt können wir unsere Icons einbinden. Dafür suchen wir das passende Icon auf der Fontawesome Website aus und kopieren den dazugehörigen Code indem wir auf das Copy-Symbol klicken: 

Fontawesome-code-kopieren

Diesen Code können wir jetzt in den Text-Editor oder jedes andere Element einfügen, das HTML unterstüzt. Wichtig ist, dass ihr den Reiter „Text“ auswählt. Nur da wird HTML als solches auch erkannt.
Registerkarten WordPress Editor

Wenn dir der Artikel gefallen hat, dann freuen wir uns über ein Follow auf Twitter und Facebook. Mehr WordPress und Divi Video Tutorials findest du auf unserem YouTube Channel.

Noch Fragen?

Verbesserungsvorschläge oder Anregungen für weitere Artikel? Dann nutz' die Kommentarfunktion unter diesem Beitrag!

Wir können das Tutorial auch für dich durchführen. Stell hierfür eine Anfrage bei Swish!

Das könnte dich auch interessieren

Anzeige Divi Theme kaufen
Aktuelle Beiträge

0 Kommentare

Einen Kommentar abschicken

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

NEWSLETTER ABONNIEREN

Wöchentlich die neusten Beiträge und Tutorials ins E-Mail Postfach.

NEWSLETTER ABONNIEREN

Wir haben dir eine Newsletter Bestätigung zugesendet. Klicke hierfür auf den Bestätigungsbutton in der E-Mail