Möchten Sie Ihrer WordPress-Site Symbolschriftarten hinzufügen? Kürzlich hat einer unserer Leser gefragt, wie man seinem WordPress-Theme am einfachsten Icon-Fonts hinzufügt.
Mit Symbolschriftarten können Sie Vektorsymbole (in der Größe veränderbar) hinzufügen, ohne Ihre Website zu verlangsamen. Sie werden wie Webfonts geladen und können mit CSS gestaltet werden.
In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie Ihrem WordPress-Theme ganz einfach Icon-Fonts hinzufügen können.
Was sind Symbolschriften 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 geändert werden. Im Vergleich zu bildbasierten Symbolen sind Schriftsymbole viel schneller, was die Geschwindigkeit Ihrer gesamten WordPress-Website verbessert.
Symbolschriftarten können verwendet werden, um häufig verwendete Symbole anzuzeigen. Sie können sie beispielsweise mit Ihrem Einkaufswagen, Download-Buttons, Feature-Boxen, Werbegeschenken und sogar in WordPress-Navigationsmenüs verwenden.
Es gibt mehrere kostenlose und Open-Source-Symbolschriften mit Hunderten von schönen Symbolen.
Tatsächlich kommt jede WordPress-Installation mit dem kostenlosen Dashicons Symbolschriftsatz. Diese Symbole werden im WordPress-Admin-Menü und in anderen Bereichen innerhalb des WordPress-Admin-Bereichs verwendet.
Einige andere beliebte Symbolschriftarten sind:
Für dieses Tutorial verwenden wir Font Awesome. Es ist die beliebteste kostenlose und Open-Source-Symbolschrift, die verfügbar ist. Wir verwenden FontAwesome auf der Themelocal-Website sowie unsere WordPress-Plugins wie OptinMonster, WPForms, GewinnspielPresse, etc.
In diesem Handbuch werden wir drei Möglichkeiten zum Hinzufügen von Symbolschriftarten in WordPress behandeln. Sie können die Lösung wählen, die für Sie am besten geeignet ist.
Hinzufügen von Symbolschriften in WordPress mithilfe von Plugins
Wenn Sie ein Anfänger sind, der nur versucht, Ihren Beiträgen oder Seiten einige Symbole hinzuzufügen, ist diese Methode für Sie geeignet. Sie müssten die Designdateien nicht ändern und könnten überall auf Ihrer Website Symbolschriftarten verwenden.
Als erstes müssen Sie die installieren und aktivieren Schriftart Super Plugin für WordPress. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung aktiviert das Plugin die Font Awesome-Unterstützung für Ihr Theme. Sie können jetzt 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 dedizierten Shortcode-Block verwenden.
Nach dem Hinzufügen können Sie eine Vorschau Ihres Beitrags oder Ihrer Seite anzeigen, um zu sehen, wie das Symbol auf einer Live-Site aussehen wird. So sah es auf unserer Testseite aus.
Sie können den Shortcode für das Schriftartsymbol auch selbst in einem Absatzblock hinzufügen, wo Sie die Blockeinstellungen verwenden können, um die Symbolgröße zu erhöhen.
Wenn Sie die Textgröße erhöhen, kann dies im Texteditor seltsam aussehen. Das liegt daran, dass sich der Shortcode im Blockeditor nicht automatisch in eine Symbolschriftart ändert.
Sie müssen auf die Vorschauschaltfläche Ihres Beitrags oder Ihrer Seite klicken, um zu sehen, wie die tatsächliche Symbolgröße aussehen würde.
Sie können auch den Symbol-Shortcode innerhalb von Spalten verwenden und Funktionsfelder wie folgt erstellen:
2. Verwenden von Symbolschriften mit einem WordPress Page Builder
Die meisten beliebten WordPress Page Builder-Plugins verfügen über eine integrierte Unterstützung für Symbolschriftarten. Auf diese Weise können Sie auf Ihren Landingpages sowie in anderen Bereichen Ihrer Website problemlos Symbolschriftarten verwenden.
Biber-Baumeister
Beaver Builder ist das beste WordPress Page Builder-Plugin auf dem Markt. Es ermöglicht Ihnen, ganz einfach benutzerdefinierte Seitenlayouts in WordPress zu erstellen, ohne Code zu schreiben.
Beaver Builder wird mit schönen Symbolen und gebrauchsfertigen Modulen geliefert, die Sie einfach per Drag & Drop in Ihren Beitrag und Ihre Seiten ziehen können.
Sie können Symbolgruppen erstellen, ein einzelnes Symbol 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 schreiben zu müssen.
Sie können sogar vollständig benutzerdefinierte WordPress-Themes erstellen, ohne Code mit dem Produkt Themer von Beaver Builder zu schreiben.
Elementor Pro
Elementor ist ein weiteres beliebtes WordPress Page Builder-Plugin. Es enthält auch mehrere Elemente, mit denen Sie Symbolschriftarten verwenden können, einschließlich eines Symbolelements.
Sie können ein Symbol einfach an eine beliebige Stelle ziehen und ablegen und es mit Zeilen, Spalten und Tabellen verwenden, um schöne Seiten zu erstellen.
Andere beliebte Seitenersteller wie Divi und Visual Composer bieten ebenfalls volle Unterstützung für Symbolschriftarten.
3. Manuelles Hinzufügen von Symbolschriften in WordPress mit Code
Wie bereits erwähnt, handelt es sich bei Symbolschriftarten nur um Schriftarten, die Ihrer Website wie benutzerdefinierte Schriftarten hinzugefügt werden können.
Einige Symbolschriften wie Font Awesome sind von CDN-Servern im gesamten Web verfügbar und können direkt von Ihrem WordPress-Theme 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 ganz einfach.
Zuerst müssen Sie die Schriftart Super Website und geben Sie Ihre E-Mail-Adresse ein, um den Einbettungscode zu erhalten.
Suchen Sie nun in Ihrem Posteingang nach einer E-Mail von Font Awesome mit Ihrem Einbettungscode. Kopiere diesen Einbettungscode und füge ihn in die header.php-Datei deines WordPress-Themes ein, kurz vor dem </head> Schild.
Ihr Einbettungscode besteht aus einer einzigen Zeile, die die Font Awesome-Bibliothek direkt von ihren CDN-Servern abruft. Es wird ungefähr so aussehen:
<script src="https://use.fontawesome.com/123456abc.js"></script>
Diese Methode ist am einfachsten, kann jedoch zu Konflikten mit anderen Plugins führen.
Ein besserer Ansatz wäre, JavaScript mithilfe des integrierten Einreihungsmechanismus ordnungsgemäß in WordPress zu laden.
Anstatt auf das Stylesheet aus der Header-Vorlage Ihres Themes zu verlinken, können Sie den folgenden Code in die Datei functions.php Ihres Themes oder in ein Site-spezifisches Plugin einfü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-Schriften auf Ihrer eigenen Website zu hosten.
Zuerst müssen Sie die Font Awesome-Website besuchen, um das Schriftartenpaket auf Ihren Computer herunterzuladen.
Laden Sie einfach die Icon-Fonts herunter und entpacken Sie das Paket.
Jetzt müssen Sie sich über einen FTP-Client mit Ihrem WordPress-Hosting verbinden und zum Verzeichnis Ihres WordPress-Themes wechseln.
Sie müssen dort einen neuen Ordner erstellen und ihn fonts benennen. Als Nächstes müssen Sie den Inhalt des Icon-Fonts-Ordners in das Fonts-Verzeichnis auf Ihrem Webhosting-Server hochladen.
Jetzt sind Sie bereit, Symbolschriftarten 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 Ihrem WordPress-Theme, Ihren Beiträgen oder Seiten tatsächliche Symbole hinzufügen.
Manuelles Anzeigen von Symbolschriften in WordPress
Gehe zum Website von Font Awesome um die vollständige Liste der verfügbaren Symbole anzuzeigen. Klicken Sie auf ein beliebiges Symbol, das Sie verwenden möchten, und Sie können den Symbolnamen sehen.
Kopieren Sie den Symbolnamen und verwenden Sie ihn so in WordPress.
<i class="fa-arrow-alt-circle-up"></i>
Sie können dieses Symbol 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 auf einmal stylen. Angenommen, Sie möchten eine Liste von Links mit Symbolen daneben anzeigen. Sie können sie unter ein
<div class="icons-group"> <a class="icons-group-item" href="#"><i class="fa fa-home fa-fw"></i>Home</a> <a class="icons-group-item" href="#"><i class="fa fa-book fa-fw"></i>Library</a> <a class="icons-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>Applications</a> <a class="icons-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a> </div>
Jetzt können Sie sie im Stylesheet Ihres Themes wie folgt formatieren:
.icons-group-item i {
color: #333;
font-size: 50px;
}
.icons-group-item i:hover {
color: #FF6600
}
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Ihrem WordPress-Theme ganz einfach Symbolschriftarten hinzufügen können. Vielleicht möchten Sie auch einen Blick auf unser Tutorial zum Hinzufügen von Bildsymbolen zu Navigationsmenüs in WordPress werfen.
