Icon-Fonts sind eines der effektivsten Werkzeuge in unserem WordPress-Design-Toolkit, und sie können auch Ihre sein.
Sie sind mehr als nur eine Augenweide – sie sind größenveränderbar, laden schnell wie Webschriften und verlangsamen Ihre Website nicht wie herkömmliche Bildsymbole. Außerdem können Sie sie mit CSS so gestalten, dass sie genau so aussehen, wie Sie es wünschen.
Wir haben zwei zuverlässige Methoden entdeckt, um Icon-Schriftarten zu WordPress hinzuzufügen, und dieser Artikel zeigt Ihnen, wie.
Was sind Icon Fonts und warum sollten Sie sie verwenden?
Icon-Schriften enthalten Symbole oder kleine Bilder anstelle von Buchstaben und Zahlen.
Sie können diese Icon-Schriften auf viele verschiedene Arten verwenden. Zum Beispiel können Sie sie für Ihren Warenkorb, Download-Buttons, Feature-Boxen, Gewinnspiele und sogar WordPress-Navigationsmenüs verwenden.
WordPress verwendet in seinem Verwaltungsbereich sogar Schriftartsymbole.
Die meisten Besucher verstehen sofort, was ein häufig verwendetes Symbol bedeutet, so dass sie die Navigation auf Ihrer Website erleichtern können. Sie können Ihnen auch dabei helfen, eine mehrsprachige Website zu erstellen, da die meisten Menschen gängige Icon-Schriftarten verstehen, unabhängig davon, welche Sprache sie sprechen.
Im Vergleich zu bildbasierten Icons laden Schrift-Icons viel schneller, so dass sie die Geschwindigkeit und Leistung von WordPress steigern können.
Es gibt mehrere Open-Source-Symbol-Schriftarten, die Sie kostenlos verwenden können, aber in diesem Leitfaden werden wir Font Awesome verwenden, da es das beliebteste Open-Source-Symbol-Set ist.
Sehen wir uns also an, wie Sie Ihrem WordPress-Theme ganz einfach Icon-Schriftarten hinzufügen können. Verwenden Sie einfach die Quick-Links, um direkt zu der gewünschten Methode zu springen:
Methode 1. Hinzufügen von Icon Fonts mit einem WordPress Plugin (kostenlos und einfach)
Der einfachste Weg, benutzerdefinierte Icon-Schriftarten zu WordPress hinzuzufügen, ist die Verwendung des Font Awesome-Plugins.
Mit diesem Plugin können Sie kostenlose Icon-Fonts in Ihren Seiten und Beiträgen verwenden, ohne Ihre WordPress-Theme-Dateien zu ändern. Außerdem erhalten Sie neue Font Awesome-Symbole automatisch, wenn Sie das Plugin aktualisieren.
Als Erstes müssen Sie Font Awesome zu WordPress hinzufügen. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.
Nach der Aktivierung können Sie ein Font Awesome-Symbol zu jedem Shortcode-Block hinzufügen. Öffnen Sie einfach die Seite oder den Beitrag, in dem Sie die Icon-Schriftart anzeigen möchten, und klicken Sie dann auf das „+“-Symbol.
Sie können jetzt nach „Shortcode“ suchen und den richtigen Block auswählen, wenn er erscheint.
Anschließend können Sie mit dem folgenden Shortcode ein beliebiges Font Awesome-Symbol hinzufügen:
[icon name="rocket"]
Ersetzen Sie einfach „Rakete“ durch den Namen des Symbols, das Sie anzeigen möchten. Um den Namen zu erhalten, gehen Sie zur Font Awesome-Bibliothek und klicken Sie auf das Symbol, das Sie verwenden möchten.
Klicken Sie in dem daraufhin angezeigten Popup auf das Symbol.
Font Awesome kopiert den Namen nun automatisch in Ihre Zwischenablage.
Anschließend fügen Sie den Namen einfach in den Shortcode ein. Sie können nun auf „Veröffentlichen“ oder „Aktualisieren“ klicken, um die Icon-Schriftart zu aktivieren.
Manchmal möchten Sie vielleicht eine Symbolschrift innerhalb eines Textblocks anzeigen. So kann es zum Beispiel erforderlich sein, ein „Copyright“-Symbol nach einem Markennamen anzuzeigen.
Fügen Sie dazu einfach den Shortcode in einen beliebigen Absatzblock ein.
Sie können dann die Einstellungen im rechten Menü verwenden, um das Symbol anzupassen, ähnlich wie Sie die Optionen für Textblöcke anpassen. In WordPress können Sie zum Beispiel die Textfarbe, die Schriftgröße und die Hintergrundfarbe ändern.
WordPress verwandelt den Shortcode in ein Font Awesome-Symbol und zeigt es neben Ihrem Text an.
Eine andere Möglichkeit besteht darin, den Shortcode in einen beliebigen Widget-Bereich einzufügen, der für Widgets geeignet ist.
Sie können zum Beispiel einen Shortcode-Block in die Seitenleiste Ihrer Website oder einen ähnlichen Bereich einfügen.
Weitere Informationen finden Sie in unserer Anleitung zur Verwendung von Shortcodes in Ihren WordPress-Seitenleisten-Widgets.
Sie können den Icon-Shortcode sogar zu Spalten hinzufügen und schöne Feature-Boxen erstellen.
Detaillierte Anweisungen finden Sie in unserer Anleitung zum Hinzufügen von Funktionsfeldern mit Symbolen in WordPress.
Viele Websites verwenden Icon-Schriftarten in ihren Menüs, um Besuchern die Orientierung zu erleichtern. Um ein Symbol hinzuzufügen, erstellen Sie entweder ein neues Menü oder öffnen Sie ein bestehendes Menü im WordPress-Dashboard.
Eine Schritt-für-Schritt-Anleitung finden Sie in unserem Leitfaden für Einsteiger zum Hinzufügen eines Navigationsmenüs in WordPress.
Klicken Sie auf der Seite Erscheinungsbild „ Menüs auf „Bildschirmoptionen“ und aktivieren Sie das Kästchen neben „CSS-Klassen“.
Klicken Sie dann einfach auf den Menüpunkt, in dem Sie das Symbol anzeigen möchten, um es zu erweitern.
Sie sollten nun ein neues Feld „CSS-Klassen“ sehen.
Um die CSS-Klasse eines Icons zu erhalten, suchen Sie einfach die Icon-Schriftart auf der Font Awesome-Website und klicken Sie sie an. Wenn Sie möchten, können Sie den Stil des Symbols ändern, indem Sie auf die verschiedenen Einstellungen klicken.
In dem Popup-Fenster sehen Sie einen HTML-Codeausschnitt. Die CSS-Klasse ist einfach der Text zwischen den Anführungszeichen. Im folgenden Bild lautet die CSS-Klasse zum Beispiel fa-solid fa-address-book.
Kopieren Sie einfach den Text innerhalb der Anführungszeichen und wechseln Sie dann zurück zum WordPress-Dashboard.
Sie können nun den Text in das Feld „CSS-Klassen“ einfügen.
Um weitere Icon-Schriften hinzuzufügen, gehen Sie einfach wie oben beschrieben vor.
Wenn Sie mit der Einrichtung des Menüs zufrieden sind, klicken Sie auf „Speichern“. Wenn Sie nun Ihre WordPress-Website besuchen, sehen Sie das aktualisierte Navigationsmenü.
Methode 2. Verwendung von Icon Fonts mit SeedProd (besser anpassbar)
Wenn Sie die Freiheit haben möchten, Schriftarten-Symbole überall auf Ihrer Website zu verwenden, dann empfehlen wir Ihnen ein Plugin für den Seitenaufbau.
SeedProd ist der beste Drag-and-Drop-WordPress-Seitenersteller auf dem Markt und hat über 1400 Font Awesome-Symbole integriert. Es hat auch einen vorgefertigten Icon-Block, den Sie per Drag-and-Drop zu jeder Seite hinzufügen können.
Mit SeedProd können Sie auch ein individuelles WordPress-Theme erstellen, das zu Ihrem gewünschten Website-Design passt.
Als Erstes müssen Sie das Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserem Leitfaden für Einsteiger zur Installation eines WordPress-Plugins.
Hinweis: Es gibt eine kostenlose Version von SeedProd, aber wir werden die Pro-Version verwenden, da sie mit dem Icon-Block geliefert wird.
Nach der Aktivierung gehen Sie zu SeedProd “ Einstellungen und geben Ihren Lizenzschlüssel ein.
Sie können diese Informationen in Ihrem Konto auf der SeedProd-Website finden. Nachdem Sie den Lizenzschlüssel eingegeben haben, klicken Sie auf die Schaltfläche „Verify Key“.
Als nächstes müssen Sie SeedProd “ Seiten besuchen und auf die Schaltfläche „Neue Landing Page hinzufügen“ klicken.
Jetzt können Sie eine Vorlage auswählen, die Sie als Basis für Ihre Seite verwenden möchten. SeedProd verfügt über mehr als 350 professionell gestaltete Vorlagen, die Sie an die Bedürfnisse Ihres WordPress-Blogs oder Ihrer Website anpassen können.
Sie können zum Beispiel eine virale Wartelisten-Landingpage, eine Squeeze Page oder sogar eine benutzerdefinierte 404-Fehlerseite erstellen, um die Benutzer zu binden.
Um eine Vorlage auszuwählen, bewegen Sie den Mauszeiger über die Vorlage und klicken Sie auf das Häkchensymbol.
Wir verwenden die Vorlage „Ebook Sales Page“ für alle unsere Bilder, da sie perfekt für den Verkauf digitaler Produkte geeignet ist. Sie können jedoch jedes Design verwenden, das Sie möchten.
Geben Sie als Nächstes einen Namen für die benutzerdefinierte Seite ein. SeedProd erstellt automatisch eine URL, die auf dem Titel der Seite basiert, aber Sie können diese URL nach Belieben ändern.
Wenn Sie mit den eingegebenen Informationen zufrieden sind, klicken Sie auf die Schaltfläche „Speichern und mit der Bearbeitung der Seite beginnen“.
Als Nächstes werden Sie zum SeedProd-Drag-and-Drop-Seitenerstellungsprogramm weitergeleitet, wo Sie die Vorlage anpassen können.
Der SeedProd-Editor zeigt auf der rechten Seite eine Live-Vorschau Ihres Entwurfs und auf der linken Seite einige Blockeinstellungen.
Im linken Menü finden Sie auch Blöcke, die Sie auf Ihren Entwurf ziehen können.
Sie können Standardblöcke wie Schaltflächen und Bilder ziehen und ablegen oder erweiterte Blöcke wie das Kontaktformular, den Countdown, Schaltflächen für die Weitergabe in sozialen Medien und mehr verwenden.
Um einen Block anzupassen, klicken Sie einfach auf ihn, um ihn in Ihrem Layout auszuwählen.
Im Menü auf der linken Seite werden nun alle Einstellungen angezeigt, mit denen Sie diesen Block anpassen können. Sie können zum Beispiel häufig die Hintergrundfarben ändern, Hintergrundbilder hinzufügen oder das Farbschema und die Schriftarten ändern, um sie besser an Ihre Marke anzupassen.
Um der Seite eine Icon-Schriftart hinzuzufügen, suchen Sie einfach den Block „Icon“ in der linken Spalte und ziehen ihn auf Ihr Layout.
SeedProd zeigt standardmäßig ein Pfeilsymbol an.
Um stattdessen ein anderes Font Awesome-Symbol anzuzeigen, klicken Sie einfach auf den Icon-Block.
Bewegen Sie den Mauszeiger im linken Menü über das Symbol und klicken Sie auf die Schaltfläche „Symbolbibliothek“, wenn diese erscheint.
Sie sehen nun alle verschiedenen Font Awesome-Symbole, die Sie auswählen können.
Suchen Sie einfach das Symbol der gewünschten Schriftart und klicken Sie es an.
SeedProd fügt nun das Symbol zu Ihrem Layout hinzu.
Nachdem Sie ein Symbol ausgewählt haben, können Sie seine Ausrichtung, Farbe und Größe über die Einstellungen im linken Menü ändern.
Sie können auch einen Link zum Schriftsymbol hinzufügen, indem Sie in das Feld „Link“ im linken Menü eingeben.
Eine weitere Möglichkeit ist die Verwendung der vorgefertigten Icon Box von SeedProd.
Damit können Sie einen Text eingeben, neben dem dann ein Schriftsymbol angezeigt wird, was es zu einer guten Wahl für Funktionsfelder macht.
Suchen Sie einfach die Icon Box im linken Menü und ziehen Sie sie auf Ihr Layout.
Sie können dann auf den Block klicken, um ihn auszuwählen und das Symbol zu ändern, indem Sie das oben beschriebene Verfahren befolgen.
Danach können Sie die Überschrift und den Text eintippen.
Über die Registerkarte „Erweitert“ können Sie außerdem die Füllung und den Rand des Blocks ändern, CSS-Animationen hinzufügen und vieles mehr.
Sie können die Seite weiter bearbeiten, indem Sie weitere Blöcke hinzufügen und diese Blöcke im Menü auf der linken Seite anpassen.
Wenn Sie mit dem Aussehen der Seite zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“. Sie können dann „Veröffentlichen“ wählen, um die Seite zu aktivieren.
Alternative: SVG-Symbole verwenden
Eine weitere Möglichkeit, Icon-Bilder zu WordPress hinzuzufügen, ist die Verwendung von SVG-Icons. Die Abkürzung steht für „Scalable Vector Format“ und ist ein häufig verwendetes Bildformat für Vektorgrafiken.
Viele Menschen verwenden SVG-Vektorsymbole anstelle von Symbolschriften, wenn sie ihren Symbolen mehrere Farben hinzufügen möchten. Diese Dateien sind auch dafür bekannt, dass sie SEO-freundlicher sind und weniger Serveranfragen zum Laden benötigen als andere Bildsymbole.
Wenn Sie mehr über SVG erfahren möchten, können Sie sich unsere Schritt-für-Schritt-Anleitung zum Hinzufügen von SVG-Bilddateien in WordPress ansehen.
Wir hoffen, dass dieses Tutorial Ihnen geholfen hat zu lernen, wie Sie Ihrem WordPress-Theme Icon-Schriftarten hinzufügen können. Sie können auch unseren Leitfaden zu den besten WordPress-Theme-Buildern durchlesen und erfahren, wie Sie Schriftarten in Ihrem WordPress-Theme ändern können.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
Shraddha Patil
Very Helpful! I was searching for such solutions. Glad I found it here. Thank you!!
WPBeginner Support
Glad our guide was helpful
Admin
Juan
Hi there, many thanks for suych a great explanation.
But I don´t understand something.
On the wp_enqueue_style() function, the first parameter is a string called ‚wpb-fa‘. I looked on the documentation and it is supposed to be the name of the stylesheet. But I don´t understand. What is this name for? Is mandatory to be named that way in this case? The stylesheet isn´t named „style.css“?
Sorry for the noob questions.
Thanks
WPBeginner Support
The wpb-fa is the unique name for the script, that section is not for the name of the stylesheet
Admin
M. Hridoy
Hi,
This is Great! Thanks for your awesome resourceful worth reading post.Indeed a timely and useful post which I could pick up some valuable information on this subject. Keep updating new suggestions with us…
WPBeginner Support
Thank you and you’re welcome
Admin
drkumar kumar
nice article , thanks for sharing
WPBeginner Support
Thank you, glad you liked our article
Admin
Niranjan G Vala
Hello wp beginners support team, I am visually impaired web designer.
Have read this whole artical but still want some help regarding integrating the font icons in my website.
I want to use Font Awesome with my theme. and already followed the steps provided above in artical.
The icons are working in post and pages vary fine but i want to use it in menus.
Here what I have done with css.
.shoppingcart::before {
font-family: FontAwesome;
content: „\f07a“;
color: #ffffff;
}
But still it didn’t worked. Then what I have done wrong?
Please assist me out of this problem.
I will always appreciate.
Vary Thank you all at wp beginners.
WPBeginner Support
Hi Niranjan,
An easier way to add Font Awesome is to add its CSS classes to invidual menu items. After enqueuing font stylesheet.
Go to Appearance » Menus page and click on Screen Options button. From there make sure that CSS Classes check box is checked.
Next click to expand an individual menu item and you will notice the option to add CSS classes. Each font-awesome icon has its own CSS class for exmaple, fa fa-lg fa-home CSS classes will be used for home icon. You can find them all on Font Awesome website.
After adding CSS class you can use those classes in your custom CSS to style the icons.
Admin
Niranjan G Vala
First thanks to all at WP Beginners for your valuable response. And sorry for late feedback. Unfortunately I was not able to reply quickly because the mail was in the spam folder. Now it works fine and i’m able to use font awesome in navigation menus.
One suggestion is that please mention the accessibility level of plugins/themes when you post an artical. Wordpress core is fully accessible but 60% of plugins and themes are not following the web accessibility guidelines (WCAG 2.0) witch is the recommendation of world wide web consortium (w3.org). Or please add skip links on your website for better accessibility. Making websites accessible will help lot to persons with disabilities like myself to navigate the website lot easier. Thanks.
ripon
in a website there should have font awesome icon. I want to make that dynamic. I want to change that icon from wordpress control panel. like why choose us section there should have responsive design font icon. I want to change that from wordpress theme option.
Tobias
Hi, awesome tutorial, thank you!
Can you help me?
I used this line of the code „-o-transform: scale(1);“ to scale my icons in Opera properly, however it didn’t help me. Maybe it is because of specifically these icons, that I am using –
Is it possible that something is wrong with them? What do you think? And thanks for your tutorial!
valldahi
Thank you very much Isy. methode 1
Nrusingh Pr Acharya
Thanks for this method. I inserted FA manually because better is not in support anymore with WP v4.7.
I am following your tutorials from first, and I’m pretty much confident in Wordpress now. Thanks.
zeniwo
A very informative article , it really helped me in clearing my doubts about adding icon fonts in wordpress themes . Bloggers like you help hundreds of new and budding bloggers like me to understand things and move ahead . Thank you very much for this useful article.
WPBeginner Support
Glad you found it helpful
Admin
Rhonda
Thank you! I’ve been trying to understand how to use the font icons and this was straight forward and helpful.
WPBeginner Support
Glad you found it helpful
Admin
Kobe
Thanks for this post. It was really useful. I’ve been using Better Fonts Awesome plugin and it helped me much. But then I needed to form my content into responsive columns and I started to search for plugin that will allow me to do that. Accidentally I came across MotoPress Editor. Actually I do not like visual editors due to dependency on them but it saved me as I could form the columns visually and use Font Awesome Icons, selecting sizes and colors easily. Thank you again for good job.