So fügen Sie einfach Symbolzeichensätze in Ihrem WordPress-Theme hinzu

Möchten Sie Symbolschriften auf Ihrer WordPress-Site hinzufügen? Kürzlich hat uns einer unserer Benutzer gefragt, wie man am einfachsten Icon-Fonts in sein WordPress-Theme einfügen kann. Icon-Fonts ermöglichen das Hinzufügen von Vektor-Icons, ohne die Website zu verlangsamen. In diesem Artikel zeigen wir Ihnen, wie Sie problemlos Symbolzeichensätze in Ihr WordPress-Design einfügen.

Was sind Icon-Fonts und warum sollten Sie diese verwenden??

Symbolschriften enthalten Symbole oder Piktogramme anstelle von Buchstaben und Zahlen. Diese Piktogramme können mithilfe von CSS leicht angepasst werden, ohne dass der Download-Anteil Ihrer Seite wesentlich erhöht wird.

Symbolschriftarten können verwendet werden, um häufig verwendete Symbole anzuzeigen. Auf einer typischen Website können Sie sie für Ihren Einkaufswagen, Download-Buttons, Feature-Boxen, Schieberegler, Social Media-Buttons und sogar in WordPress-Navigationsmenüs verwenden.

Es gibt mehrere kostenlose und Open Source-Symbolschriftarten mit Hunderten von Symbolen. Tatsächlich enthält jede WordPress-Installation den kostenlosen Zeichensatz für Dashicons-Symbole. Diese Symbole werden in der WordPress-Admin-Symbolleiste im Admin-Bereich verwendet.

Einige andere beliebte Symbol-Schriftarten sind:

• Schrift fantastisch
• Gattungen
• IcoMoon
• Linearicons

In diesem Tutorial verwenden wir FontAwesome. Es ist die beliebteste, freie und Open Source-Symbolschrift, die verfügbar ist, und wir verwenden sie auch in unserem OptinMonster-Builder.

Wir werden zwei Möglichkeiten aufzeigen, wie man Icon-Fonts in WordPress hinzufügt. Die erste Methode verwendet ein Plugin und die zweite Methode zeigt Ihnen, wie Sie eine Symbolschriftart ohne Plugin hinzufügen.

Hinzufügen von Symbolschriftarten in WordPress mithilfe von Plugins

FontAwesome und andere kostenlose Symbolschriftarten werden von vielen WordPress-Plugins unterstützt. Mit einem Plugin können Sie problemlos einem WordPress-Theme eine Symbol-Schriftart hinzufügen, ohne Code zu ändern.

Zuerst müssen Sie das Better Font Awesome-Plugin installieren und aktivieren. Nach der Aktivierung können Sie besuchen Einstellungen »Better Font Awesome Seite, um die Plugin-Einstellungen zu konfigurieren. Das Plugin funktioniert jedoch sofort, so dass die meisten Benutzer dort nichts ändern müssen.

Mit Better Font Awesome können Sie Zeichensymbole mithilfe von Kurzwahlen wie folgt hinzufügen:

[icon name = "Rakete"]
[icon name = "cloud"]
[icon name = "Kopfhörer"]

Sie können die Symbole auch im Post-Editor hinzufügen, indem Sie einfach ein Symbol auswählen. Erstellen Sie einen neuen Beitrag oder bearbeiten Sie einen vorhandenen und Sie sehen das Schaltfläche "Symbol einfügen".

Wenn Sie darauf klicken, wird ein Popup-Fenster geöffnet, in dem Sie ein Symbol suchen und einfügen können.

Sie werden feststellen, dass das Plugin in Ihrem Post-Editor einen Shortcode hinzufügt, der folgendermaßen aussieht:

[icon name = "Universität"]

Wenn Sie das Symbol weiter anpassen möchten, können Sie Ihre eigene CSS-Klasse hinzufügen, um benutzerdefinierte Stile hinzuzufügen.

[icon name = "Universität"]

Jetzt können Sie das Symbol mit CSS in Ihrem Stylesheet oder einem Stylesheet für untergeordnete Designs gestalten.

 .fa-universityicon Schriftgröße: 100px; Farbe: # FF6600;  

So einfach ist das.

Lassen Sie uns nun einen Blick darauf werfen, wie Sie ohne ein Plugin Symbolzeichensätze in WordPress hinzufügen können.

Manuelles Hinzufügen von Symbolzeichensätzen in WordPress

Wie bereits erwähnt, handelt es sich bei den Symbolschriftarten nur um Schriftarten, die Sie Ihrer Site hinzufügen können, wie Sie auch benutzerdefinierte Schriftarten hinzufügen würden.

Einige Symbolzeichensätze wie Font Awesome sind auf CDN-Servern im Internet verfügbar und können direkt mit Ihrem WordPress-Design verknüpft werden.

Sie können auch das gesamte Schriftartenverzeichnis in einen Ordner in Ihrem WordPress-Design hochladen und dann diese Schriftarten in Ihrem Stylesheet verwenden.

Da wir Font Awesome für dieses Tutorial verwenden, zeigen wir Ihnen, wie Sie es mit beiden Methoden hinzufügen können.

Methode 1:

Dies ist der einfachste. Alles, was Sie tun müssen, ist, diese einzige Codezeile in Ihr Theme aufzunehmen header.php Datei kurz vor dem Etikett.

Diese Methode ist am einfachsten, kann jedoch Konflikte mit anderen Plugins verursachen.

Ein besserer Ansatz, Stylesheets oder Skripts in WordPress zu laden, ist das korrekte Einreihen.

Anstatt von der Kopfzeilenvorlage Ihres Themas aus auf das Stylesheet zuzugreifen, können Sie den folgenden Code in die Datei functions.php Ihres Themas oder in ein site-spezifisches Plugin einfügen.

 Funktion wpb_load_fa () wp_enqueue_style ('wpb-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');  add_action ('wp_enqueue_scripts', 'wpb_load_fa')); 

Methode 2:

Die zweite Methode ist nicht die einfachste, aber Sie können die Zeichensätze in Ihrem Design verwenden.

Laden Sie einfach die Symbolschriftarten herunter und entpacken Sie das Paket. Jetzt müssen Sie über einen FTP-Client eine Verbindung zu Ihrer Website herstellen und in das WordPress-Verzeichnis wechseln.

Dort müssen Sie einen neuen Ordner erstellen und ihm Schriftarten nennen. Als Nächstes müssen Sie den Inhalt des Symbolzeichensatzordners in das Zeichensatzverzeichnis auf Ihrem Server hochladen.

Jetzt können Sie Symbol-Schriftarten in Ihr WordPress-Design laden. Fügen Sie diesen Code einfach in die Datei functions.php Ihres Themas oder in ein standortspezifisches Plugin ein.

 Funktion 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-Design geladen.

Jetzt kommt der Teil, in dem Sie Ihrem WordPress-Theme, Ihren Posts oder Seiten echte Icons hinzufügen.

Manuelles Anzeigen von Symbolschriftarten in WordPress

Besuchen Sie die Website von Font Awesome, um die vollständige Liste der verfügbaren Symbole anzuzeigen. Klicken Sie auf ein Symbol, das Sie verwenden möchten, und Sie können den Symbolnamen sehen.

Kopieren Sie den Symbolnamen und verwenden Sie ihn so in WordPress.

Sie können dieses Symbol im Stylesheet Ihres Themas folgendermaßen gestalten:

 .fa-optin-monster Schriftgröße: 50px; Farbe: # FF6600;  

Sie können auch verschiedene Symbole miteinander kombinieren und auf einmal gestalten. Nehmen wir beispielsweise an, Sie möchten eine Liste mit Links neben Symbolen anzeigen. Sie können sie mit einer bestimmten Klasse unter einem Element umschließen.

  Zuhause Bibliothek Anwendungen die Einstellungen  

Jetzt können Sie sie im Stylesheet Ihres Themas folgendermaßen gestalten:

 .Icons-Gruppenelement i color: # 333; Schriftgröße: 50px;  .icons-group-item i: hover color: # FF6600 

Wir hoffen, dass Sie mit diesem Artikel erfahren haben, wie Sie problemlos Symbol-Schriftarten in Ihr WordPress-Design einfügen. In unserem Tutorial erfahren Sie, wie Sie mit WordPress Navigationsmenüs Bildsymbole hinzufügen.

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