So fügen Sie Wordpress Icon Fonts in Ihr Theme ein
Kürzlich fragte einer unserer Leser, wie man am einfachsten Icon-Fonts in seinem WordPress-Theme hinzufügen kann Mit Icon-Fonts können Sie Vektor-Symbole (in der Größe veränderbar) hinzufügen, ohne Ihre Website zu verlangsamen. Sie werden wie Webfonts geladen und können mit CSS gestylt werden. In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach Wordpress Icons in Ihr WordPress-Theme einfügen können, Schritt für Schritt.
Was sind Icon-Fonts und warum sollten Sie sie verwenden?
Icon-Fonts enthalten Symbole oder Piktogramme anstelle von Buchstaben und Zahlen.
Diese Piktogramme können einfach zu Website-Inhalten hinzugefügt und mit CSS in der Größe angepasst werden. Im Vergleich zu bildbasierten Icons sind Icon-Fonts viel schneller, was der Geschwindigkeit Ihrer WordPress Site insgesamt zugutekommt.
Icon-Fonts können verwendet werden, um häufig verwendete Icons anzuzeigen.
Sie können sie z. B. für Ihren Warenkorb, Download-Buttons, Feature-Boxen, Giveaway-Wettbewerbe und sogar in WordPress-Navigationsmenüs verwenden.
Es sind mehrere kostenlose und Open-Source-Icon-Fonts verfügbar, die Hunderte von schönen Icons enthalten. Tatsächlich wird jede WordPress-Installation mit dem kostenlosen Dashicons-Icon-Font-Set geliefert. Diese Icons werden im WordPress-Adminmenü und anderen Bereichen im WordPress-Adminbereich verwendet.
Einige andere beliebte Icon-Fonts sind: Für dieses Tutorial werden wir Font Awesome verwenden. Es ist die beliebteste kostenlose und Open-Source-Icon-Schriftart. Wir verwenden FontAwesome auf unserer Webseite drdomains.de.
In dieser Anleitung werden wir drei Möglichkeiten zum Hinzufügen von Icon-Fonts in WordPress behandeln. Sie können die Lösung wählen, die für Sie am besten funktioniert.
Hinzufügen von Icon-Fonts in WordPress mithilfe von Plugins
Wenn Sie ein Anfänger sind und nur versuchen, Ihren Beiträgen oder Seiten einige Icons hinzuzufügen, dann ist diese Methode für Sie geeignet.
Sie müssten die Themadateien nicht ändern und könnten überall auf Ihrer Website Icon-Fonts verwenden. Als erstes müssen Sie das Font Awesome Plugin für WordPress installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.
Nach der Aktivierung aktiviert das Plugin die Font Awesome-Unterstützung für Ihr Theme. Sie können nun jeden WordPress-Beitrag oder jede Seite bearbeiten und den Symbol-Shortcode wie folgt verwenden:
[icon name="rocket"]
Sie können diesen Shortcode zusammen mit anderem Text oder allein in einem eigenen Shortcode-Block verwenden.
Sobald er hinzugefügt wurde, können Sie eine Vorschau Ihres Beitrags oder Ihrer Seite anzeigen, um zu sehen, wie das Symbol auf einer Live-Site aussehen wird. Hier sehen Sie, wie es auf unserer Testseite aussieht.
Sie können den Font-Icon-Shortcode auch selbst in einen Absatzblock einfügen, wo Sie die Blockeinstellungen verwenden können, um das Symbol zu vergrößern. 
Wenn Sie die Textgröße erhöhen, kann dies im Texteditor merkwürdig aussehen. Das liegt daran, dass der Shortcode nicht automatisch in eine Icon-Schriftart innerhalb des Blockeditors wechselt. Sie müssen in Ihrem Beitrag oder auf Ihrer Seite auf die Schaltfläche "Vorschau" klicken, um zu sehen, wie die tatsächliche Symbolgröße aussehen würde.
Sie können den Icon-Shortcode auch innerhalb von Spalten verwenden und Funktionsfelder wie dieses erstellen: 
2.Verwendung von Icon-Fonts mit einem WordPress Page Builder ( wordpress customizer )
Die meisten populären WordPress-Page-Builder-Plugins verfügen über integrierte Unterstützung für Icon-Fonts
Dadurch können Sie Icon-Fonts ganz einfach in Ihren Landing Pages sowie in anderen Bereichen Ihrer Website verwenden.
Beaver Builder
Beaver Builder ist das beste WordPress-Seitenerstellungs-Plugin auf dem Markt.
Mit ihm können Sie ganz einfach benutzerdefinierte Seitenlayouts in WordPress erstellen, ohne Code zu schreiben. Beaver Builder kommt mit schönen Icons und fertigen Modulen, die Sie einfach per Drag-and-Drop in Ihre Beiträge und Seiten ziehen können.
Sie können Icon-Gruppen erstellen, ein einzelnes Icon hinzufügen und sie in gut positionierte Zeilen und Spalten verschieben. Sie können auch Ihre eigenen Farben, Hintergründe, Abstände und Ränder auswählen, ohne CSS zu schreiben.
Mit dem Themer-Produkt von Beaver Builder können Sie sogar komplett eigene WordPress-Themes erstellen, ohne Code zu schreiben. Elementor Pro Elementor ist ein weiteres beliebtes WordPress-Seitenerstellungs-Plugin.
Es kommt auch mit mehreren Elementen, die es Ihnen ermöglichen, Icon-Schriften zu verwenden, einschließlich eines Icon-Elements.
Sie können ein Icon einfach per Drag & Drop an eine beliebige Stelle ziehen und es mit Zeilen, Spalten und Tabellen verwenden, um schöne Seiten zu erstellen.
Andere beliebte Page Builder wie Divi und Visual Composer haben ebenfalls volle Unterstützung für Icon-Schriften.
3. Manuelles Hinzufügen von Icon-Fonts in WordPress mit Code
Wie wir bereits erwähnt haben, sind Icon-Fonts nur Schriftarten und können zu Ihrer Website hinzugefügt werden, so wie Sie jede andere benutzerdefinierte Schriftart hinzufügen würden
Einige Icon-Fonts, wie Font Awesome, sind von CDN-Servern im Internet verfügbar und können direkt von Ihrem WordPress-Theme aus verlinkt werden. Sie können auch das gesamte Schriftartenverzeichnis in einen Ordner in Ihrem WordPress-Theme hochladen und diese Schriftarten dann in Ihrem Stylesheet verwenden. Da wir für dieses Tutorial Font Awesome verwenden, zeigen wir Ihnen, wie Sie es mit beiden Methoden hinzufügen können.
Methode 1: Diese manuelle Methode ist recht einfach.
Zuerst müssen Sie die Font Awesome-Website besuchen und Ihre E-Mail-Adresse eingeben, um den Einbettungscode zu erhalten.
Prüfen Sie nun Ihren Posteingang auf eine E-Mail von Font Awesome mit Ihrem Einbettungscode. Kopieren Sie diesen Einbettungscode und fügen Sie ihn in die Datei header.php Ihres WordPress-Themes ein, direkt vor dem Tag .
Ihr Einbettungscode besteht aus einer einzigen Zeile, die die Font Awesome-Bibliothek direkt von den CDN-Servern abruft.
Diese Methode ist am einfachsten, kann aber zu Konflikten mit anderen Plugins führen.
Ein besserer Ansatz wäre, JavaScript in WordPress mit dem eingebauten Enqueueing-Mechanismus richtig zu laden. Anstatt das Stylesheet aus der Kopfzeilenvorlage Ihres Themes zu verlinken, können Sie den folgenden Code in der Datei functions.php Ihres Themes oder in einem Site-spezifischen Plugin hinzufügen.
function wpb_load_fa() { wp_enqueue_script( 'wpb-fa', 'https://use.fontawesome.com/123456abc.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );
Methode 2:
Die zweite Methode ist nicht die einfachste, aber sie würde es Ihnen ermöglichen, die Font Awesome-Icon-Fonts auf Ihrer eigenen Website zu hosten.
Zunächst müssen Sie die Font Awesome-Website besuchen, um das Schriftartenpaket auf Ihren Computer herunterzuladen.
Laden Sie einfach die Symbolschriftarten herunter und entpacken Sie das Paket.
Nun müssen Sie sich mit einem FTP-Client mit Ihrem WordPress-Hosting verbinden und in das Verzeichnis Ihres WordPress-Themes gehen. Dort müssen Sie einen neuen Ordner erstellen und ihn fonts nennen. Als nächstes müssen Sie den Inhalt des Ordners "icon fonts" in das Verzeichnis "fonts" auf Ihrem Webhosting-Server hochladen.
Jetzt sind Sie bereit, Icon-Fonts in Ihr WordPress-Theme zu laden. Fügen Sie diesen Code einfach in die Datei functions.php Ihres Themes oder in ein Site-spezifisches Plugin ein.
function wpb_load_fa() { wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() .
'/fonts/css/font-awesome.min.css' ); } add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );
Sie haben Font Awesome erfolgreich in Ihr WordPress-Theme geladen.
Jetzt kommt der Teil, in dem Sie tatsächliche Icons in Ihr WordPress-Theme, in Beiträge oder Seiten einfügen.
In WordPress icon ändern
Gehen Sie auf die Website von Font Awesome, um die vollständige Liste der verfügbaren Icons zu sehen.
Klicken Sie auf ein beliebiges Icon, das Sie verwenden möchten, und Sie werden den Namen des Icons sehen können.
Kopieren Sie den Icon-Namen und verwenden Sie ihn wie folgt in WordPress.
Sie können dieses Icon im Stylesheet Ihres Themes wie folgt gestalten:
.fa-arrow-alt-circle-up { font-size:50px color:#FF6600 }
Sie können auch verschiedene Symbole miteinander kombinieren und sie auf einmal stylen.
Angenommen, Sie möchten eine Liste von Links mit Symbolen daneben anzeigen. Sie können sie unter einem element mit einer bestimmten Klasse einschließen Startseite, Bibliothek, Anwendungen, Einstellungen.
Nun können Sie sie im Stylesheet Ihres Themes wie folgt gestalten:
.icons-group-item i { color: #333 font-size: 50px } .icons-group-item i:hover { color: #FF6600 }
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie ganz einfach Icon-Schriftarten in Ihrem WordPress-Theme hinzufügen können.