Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

So fügen Sie ganz einfach Icon Fonts in Ihr WordPress-Theme ein

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.

How to easily add icon fonts in your WordPress theme

Was sind Icon Fonts und warum sollten Sie sie verwenden?

Icon-Schriften enthalten Symbole oder kleine Bilder anstelle von Buchstaben und Zahlen.

Font Awesome icon fonts

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.

Font icons in the WordPress dashboard

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.

Adding a font icon to WordPress using shortcode

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.

Font Awesome library

Klicken Sie in dem daraufhin angezeigten Popup auf das Symbol.

Font Awesome kopiert den Namen nun automatisch in Ihre Zwischenablage.

Copying the Font Awesome icon name for the shortcode

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.

Adding an icon font in WordPress using a shortcode

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.

An example of an icon font in WordPress

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.

Adding an icon font to a widget-ready area in WordPress

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.

An example of a features box on a WordPress website

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

Adding CSS classes to a WordPress navigation menu

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.

Adding an icon font using a CSS class

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.

Copying the Font Awesome icon CSS class

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.

Adding icon fonts in WordPress using a CSS class

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

An example of icon fonts in a WordPress navigation menu

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.

Entering the SeedProd license key

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.

Choosing a custom design for your WordPress page

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.

Choosing a professionally-designed template

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

Adding a title to a SeedProd page design

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.

Customizing a SeedProd WordPress page template

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.

Adding blocks a page or post design in WordPress

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.

Creating a custom layout for a WordPress website

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.

Adding an icon font in WordPress using SeedProd

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.

Choosing a font icon using a page builder

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's built-in icon font library

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.

How to customize a font icon using SeedProd

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.

Adding font icons to a SeedProd template

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.

Adding an Icon Block to a SeedProd landing page design

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.

Customizing a WordPress Icon Block using SeedProd

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.

Publishing a custom page layout with a font icon

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

21 KommentareEine Antwort hinterlassen

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

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

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

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

  5. drkumar kumar

    nice article , thanks for sharing

    • WPBeginner Support

      Thank you, glad you liked our article :)

      Admin

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

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

  8. 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!

  9. valldahi

    Thank you very much Isy. methode 1

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

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

  12. Rhonda

    Thank you! I’ve been trying to understand how to use the font icons and this was straight forward and helpful.

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

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.