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

Wenn wir uns WordPress-Websites ansehen, die reguläre Bilddateien für ihre Icons verwenden, können wir nicht anders, als zu denken, dass ihnen etwas Besseres entgeht.

Das liegt daran, dass Icon-Schriftarten die intelligentere Wahl sind – sie laden schneller, sehen auf jedem Bildschirm schärfer aus und Sie können ihre Größe oder Farbe mit nur wenigen Klicks ändern.

Viele Website-Besitzer verwenden immer noch altmodische Bildsymbole, weil sie noch nichts von den einfacheren verfügbaren Optionen gehört haben. Dank moderner Icon-Schriften können Sie Ihrer Website jetzt großartig aussehende Symbole hinzufügen, ohne sie zu verlangsamen.

In diesem Leitfaden zeigen wir Ihnen die einfachsten Möglichkeiten, Icon-Schriftarten zu Ihrem WordPress-Theme hinzuzufügen. Wir haben diese Methoden selbst getestet und sie funktionieren hervorragend mit jedem Theme, das Sie möglicherweise verwenden.

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-Schriftarten auf viele verschiedene Arten verwenden. Zum Beispiel können Sie sie mit Ihrem Einkaufswagen, Download-Schaltflächen, Feature-Boxen, Gewinnspielen und sogar WordPress-Navigationsmenüs verwenden.

Tatsächlich verwendet WordPress Schrift-Icons in seinem Admin-Bereich.

Die meisten Besucher verstehen sofort, was ein gängiges Symbol bedeutet, sodass sie Ihre Website leichter navigieren können. Sie können Ihnen auch 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 Icon-Fonts viel schneller, sodass sie die WordPress-Geschwindigkeit und -Leistung verbessern können.

Es gibt mehrere Open-Source-Icon-Schriftartensets, die Sie kostenlos verwenden können, aber in diesem Leitfaden werden wir Font Awesome verwenden, da es das beliebteste Open-Source-Icon-Set ist.

Mit diesen Worten wollen wir uns ansehen, wie Sie ganz einfach Icon-Schriften zu Ihrem WordPress-Theme hinzufügen können. Verwenden Sie einfach die Schnelllinks, um direkt zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1. Icon-Schriften mit einem WordPress-Plugin hinzufügen (kostenlos und einfach)
• Method 2. Using Icon Fonts with SeedProd (More Customizable)

Methode 1. Icon-Schriften mit einem WordPress-Plugin hinzufügen (kostenlos und einfach)

Der einfachste Weg, benutzerdefinierte Icon-Schriftarten zu WordPress hinzuzufügen, ist die Verwendung des Font Awesome Plugins.

Dieses Plugin ermöglicht es Ihnen, kostenlose Icon-Schriftarten auf Ihren Seiten und Beiträgen zu verwenden, ohne Ihre WordPress-Theme-Dateien zu ändern. Sie erhalten auch automatisch alle neuen Font Awesome-Icons, jedes Mal, wenn Sie das Plugin aktualisieren.

Das erste, was Sie tun müssen, ist, Font Awesome zu WordPress hinzuzufügen. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Nach der Aktivierung können Sie jedem Shortcode-Block ein Font Awesome-Icon hinzufügen. Öffnen Sie einfach die Seite oder den Beitrag, auf dem Sie das Icon-Font 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.

Wenn das erledigt ist, können Sie jedes Font Awesome-Symbol mit dem folgenden Shortcode hinzufügen:

[icon name="rocket"]

Ersetzen Sie einfach „rocket“ durch den Namen des Icons, das Sie anzeigen möchten. Um den Namen zu erhalten, gehen Sie zur Font Awesome-Bibliothek und klicken Sie auf das Icon, das Sie verwenden möchten.

Klicken Sie im erscheinenden Popup auf das Icon.

Font Awesome kopiert nun automatisch den Namen in Ihre Zwischenablage.

Wenn das erledigt ist, fügen Sie einfach den Namen in den Shortcode ein. Sie können nun auf „Veröffentlichen“ oder „Aktualisieren“ klicken, um die Icon-Schriftart live zu schalten.

Manchmal möchten Sie vielleicht eine Icon-Schriftart innerhalb eines Textblocks anzeigen. Zum Beispiel müssen Sie möglicherweise ein „Copyright“-Symbol nach einem Markennamen anzeigen.

Fügen Sie dazu einfach den Shortcode in einen beliebigen Absatzblock ein.

Sie können dann die Einstellungen im rechten Menü verwenden, um das Icon anzupassen, ähnlich wie Sie Optionen für Textblöcke anpassen. Zum Beispiel können Sie die Textfarbe, die Schriftgröße und die Hintergrundfarbe in WordPress ändern.

WordPress wandelt den Shortcode in ein Font Awesome-Icon um und zeigt es neben Ihrem Text an.

Eine andere Möglichkeit ist, den Shortcode zu jedem Widget-fähigen Bereich hinzuzufügen.

Sie können beispielsweise einen Shortcode-Block zur Seitenleiste Ihrer Website oder einem ähnlichen Bereich hinzufügen.

Weitere Informationen finden Sie in unserem Leitfaden 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.

Für detaillierte Anweisungen siehe unseren Leitfaden zum Thema Hinzufügen von Feature-Boxen mit Icons in WordPress.

Viele Websites verwenden Icon-Schriften in ihren Menüs, um Besuchern die Orientierung zu erleichtern. Um ein Icon hinzuzufügen, erstellen Sie entweder ein neues Menü oder öffnen Sie ein bestehendes Menü im WordPress-Dashboard.

Für Schritt-für-Schritt-Anleitungen lesen Sie unseren Anfängerleitfaden unter wie man ein Navigationsmenü in WordPress hinzufügt.

Klicken Sie auf der Seite Darstellung » Menüs auf „Bildschirmoptionen“ und aktivieren Sie dann das Kontrollkästchen neben „CSS-Klassen“.

Wenn das erledigt ist, klicken Sie einfach, um das Menüelement zu erweitern, in dem Sie das Symbol anzeigen möchten.

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 darauf. Wenn Sie möchten, können Sie den Stil des Icons ändern, indem Sie auf die verschiedenen Einstellungen klicken.

Im Popup sehen Sie einen HTML-Code-Schnipsel. Die CSS-Klasse ist einfach der Text zwischen den Anführungszeichen. Im folgenden Bild ist die CSS-Klasse beispielsweise fa-solid fa-address-book.

Kopieren Sie einfach den Text in den Anführungszeichen und wechseln Sie dann zurück zum WordPress-Dashboard.

Sie können den Text jetzt in das Feld „CSS-Klassen“ einfügen.

Um weitere Icon-Schriftarten hinzuzufügen, folgen Sie einfach demselben oben beschriebenen Prozess.

Wenn Sie mit dem Aufbau 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 (flexibler)

Wenn Sie die Freiheit haben möchten, Schriftart-Icons überall auf Ihrer Website zu verwenden, empfehlen wir die Verwendung eines Seitenbaukasten-Plugins.

SeedProd ist der beste Drag-and-Drop-Seitenersteller für WordPress auf dem Markt und verfügt über mehr als 1400 integrierte Font Awesome-Icons. Es gibt auch einen fertigen Icon-Block, den Sie per Drag & Drop zu jeder Seite hinzufügen können.

Mehrere unserer Partner-Marken haben ihre gesamten Websites damit erstellt und hatten großartige Erfahrungen. Details finden Sie in unserem SeedProd-Testbericht.

Das erste, was Sie tun müssen, ist, das Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserem Anfängerleitfaden zur Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie zu SeedProd » Einstellungen und geben Sie Ihren Lizenzschlüssel ein.

Diese Informationen finden Sie in Ihrem Konto auf der SeedProd-Website. Nachdem Sie den Lizenzschlüssel eingegeben haben, klicken Sie auf die Schaltfläche „Schlüssel überprüfen“.

Als Nächstes müssen Sie SeedProd » Seiten besuchen und auf die Schaltfläche 'Neue Landingpage hinzufügen' klicken.

Nun können Sie eine Vorlage auswählen, die als Grundlage für Ihre Seite dient. SeedProd bietet über 350+ professionell gestaltete Vorlagen, die Sie an die Bedürfnisse Ihres WordPress-Blogs oder Ihrer Website anpassen können.

Zum Beispiel können Sie eine virale Wartelisten-Landingpage, eine Squeeze-Page oder sogar eine benutzerdefinierte 404-Fehlerseite erstellen, um Benutzer zu binden.

Um eine Vorlage auszuwählen, bewegen Sie die Maus darüber und klicken Sie dann auf das Symbol „Häkchen“.

Wir verwenden die Vorlage „E-Book-Verkaufsseite“ in allen unseren Bildern, da sie perfekt für den Verkauf digitaler Produkte ist. Sie können jedoch jedes beliebige Design verwenden.

Geben Sie als Nächstes einen Namen für die benutzerdefinierte Seite ein. SeedProd erstellt automatisch eine URL basierend auf dem Titel der Seite, aber Sie können diese URL beliebig ändern.

Wenn Sie mit den eingegebenen Informationen zufrieden sind, klicken Sie auf die Schaltfläche „Speichern und Seite bearbeiten starten“.

Als Nächstes gelangen Sie zum SeedProd Drag-and-Drop-Seitenersteller, wo Sie die Vorlage anpassen können.

Der SeedProd-Editor zeigt rechts eine Live-Vorschau Ihres Designs und links einige Blockeinstellungen an.

Das linke Menü enthält auch Blöcke, die Sie in Ihr Design ziehen können.

Sie können Standardblöcke wie Schaltflächen und Bilder per Drag & Drop ziehen oder fortgeschrittene Blöcke wie das Kontaktformular, Countdown, Social-Media-Sharing-Buttons und mehr verwenden.

Um einen beliebigen Block anzupassen, klicken Sie einfach darauf, um ihn in Ihrem Layout auszuwählen.

Das linke Menü zeigt nun alle Einstellungen an, die Sie zur Anpassung dieses Blocks verwenden können. Sie können beispielsweise oft Hintergrundfarben ändern, Hintergrundbilder hinzufügen oder das Farbschema und die Schriftarten ändern, um sie besser an Ihre Marke anzupassen.

Um eine Icon-Schriftart zur Seite hinzuzufügen, suchen Sie einfach den Block „Icon“ in der linken Spalte und ziehen Sie ihn dann auf Ihr Layout.

SeedProd zeigt standardmäßig ein „Pfeil“-Symbol an.

Um ein anderes Font Awesome-Symbol anzuzeigen, klicken Sie einfach, um den Symbolblock auszuwählen.

Bewegen Sie im linken Menü die Maus über das Symbol und klicken Sie dann auf die Schaltfläche 'Symbolbibliothek', wenn sie erscheint.

Sie sehen nun alle verschiedenen Font Awesome-Icons, aus denen Sie wählen können.

Suchen Sie einfach nach dem Schrift-Icon, das Sie verwenden möchten, und klicken Sie darauf.

SeedProd fügt nun das Icon zu Ihrem Layout hinzu.

Nach der Auswahl eines Icons können Sie dessen Ausrichtung, Farbe und Größe über die Einstellungen im linken Menü ändern.

Sie können auch einen Link zum Schrift-Symbol hinzufügen, indem Sie in das Feld 'Link' im linken Menü eingeben.

Eine weitere Option ist die Verwendung der fertigen Icon Box von SeedProd.

Dies ermöglicht es Ihnen, Text einzugeben und dann ein Schrift-Icon daneben anzuzeigen, was es zu einer großartigen Wahl für Feature-Boxen 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 Icon ändern, indem Sie denselben Prozess wie oben beschrieben befolgen.

Danach können Sie den Kopf- und den Textkörper eingeben.

Sie können auch den Abstand und Rand des Blocks ändern, CSS-Animationen hinzufügen und mehr, indem Sie die Registerkarte „Erweitert“ auswählen.

Sie können die Arbeit an der Seite fortsetzen, indem Sie weitere Blöcke hinzufügen und diese Blöcke im linken Menü anpassen.

Wenn Sie mit dem Aussehen der Seite zufrieden sind, klicken Sie auf die Schaltfläche 'Speichern'. Sie können dann 'Veröffentlichen' auswählen, um die Seite live zu schalten.

Alternative: SVG-Icons verwenden

Eine weitere Möglichkeit, Icon-Bilder zu WordPress hinzuzufügen, ist die Verwendung von SVG-Icons. Abkürzung für Scalable Vector Format, ist es ein gängiges Bildformat für Vektorgrafiken.

Viele Leute verwenden SVG-Vektorsymbole anstelle von Icon-Schriften, wenn sie ihren Symbolen mehrere Farben hinzufügen möchten. Diese Dateien sind auch bekanntermaßen SEO-freundlicher und erfordern nur wenige Serveranfragen zum Laden als andere Bildsymbole.

Wenn Sie mehr über SVG erfahren möchten, können Sie sich unseren Schritt-für-Schritt-Leitfaden ansehen: So fügen Sie SVG-Bilddateien in WordPress hinzu.

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie Icon-Schriften zu Ihrem WordPress-Theme hinzufügen. Sie können auch unseren Leitfaden zu den besten WordPress-Theme-Buildern und wie Sie Schriftarten in Ihrem WordPress-Theme ändern durchgehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.