ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Search
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
Lektüre: So fügen Sie Ihrem WordPress-Theme ganz einfach Symbolschriften hinzu
Aktie
Benachrichtigung Zeig mehr
Aa
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Aa
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
Search
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Folge uns
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren > Blog > WordPress > Themes > So fügen Sie Ihrem WordPress-Theme ganz einfach Symbolschriften hinzu
Themes

So fügen Sie Ihrem WordPress-Theme ganz einfach Symbolschriften hinzu

Zuletzt aktualisiert: November 19, 2021 12:18 am
ThemeLocal vor 2 Jahren 10 Minuten Mindestlesezeit
Aktie
10 Minuten Mindestlesezeit
Aktie

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.

Contents
Was sind Symbolschriften und warum sollten Sie sie verwenden?Hinzufügen von Symbolschriften in WordPress mithilfe von Plugins2. Verwenden von Symbolschriften mit einem WordPress Page Builder3. Manuelles Hinzufügen von Symbolschriften in WordPress mit CodeManuelles Anzeigen von Symbolschriften in WordPress

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.

Vorschau der Symbolschriftarten

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:

  • Schriftart Super
  • Generika
  • IcoMoon
  • Linearsymbole
  • Materialsymbole von Google
  • Das Nomen-Projekt

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.

Hinzufügen von Symbolschrift-Shortcode in WordPress

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.

Symbolvorschau

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.

Symbolgröße 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.

Symbolschrift vergrößert

Sie können auch den Symbol-Shortcode innerhalb von Spalten verwenden und Funktionsfelder wie folgt erstellen:

Verwenden von Symbolschriftarten in Funktionsfeldern

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.

Beaver Builder Symbolmodule

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.

Bearbeiten Sie Symbolschriftarten in Beaver Builder

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.

Elementor-Symbol

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.

Holen Sie sich den Font Awesome-Einbettungscode

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 die Symbolschrift auf Ihren Computer herunter

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.

Hochladen von Symbolschriften in Ihr WordPress-Theme

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.

Symbolname

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

-Element mit einer bestimmten Klasse einschließen.

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

Verwandter Beitrag

So überprüfen Sie die Anzahl der Batteriezyklen auf dem iPhone 15

So passen Sie die Aktionstaste des iPhone 15 Pro an

So verhindern Sie, dass der Akku Ihres iPhone 15 zu mehr als 80 % aufgeladen wird

Schützen Sie sofort Ihre digitale oder persönliche Sicherheit auf dem iPhone mit einem Notfall-Reset in Safety Check (iOS 17)

iPhone 15 Pro: So legen Sie eine Standardbrennweite für die Kamera fest

MARKIERTE: einfach, fügen, ganz, hinzu, Ihrem, Sie, Symbolschriften, WordPressTheme
ThemeLocal November 19, 2021 November 19, 2021
Teile diesen Artikel
Facebook Twitter Pinterest Whatsapp Whatsapp
Aktie
Was denkst du?
Liebe0
Traurig0
Glücklich0
Schläfrig0
Wütend0
kein Kommentar0
Zwinkern0
Vorheriger Artikel So erstellen Sie ein schwebendes Navigationsmenü in WordPress
Nächster Artikel So fügen Sie einen PDF-Viewer in WordPress hinzu
Hinterlasse einen Kommentar

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Berühmter Post

So wechseln Sie zwischen Stummschaltung/Lautlos-Modus und Klingelmodus auf dem iPhone 15 Pro
Wie man
Das phänomenale iPhone 15 Pro-Angebot beinhaltet eine exklusive Geschenkkarte
Angebote
Das iPhone 12 ist gerade ein günstiges Apple-Upgrade geworden
Angebote
Gewinner und Verlierer: iOS 17 kommt auf iPhones, da Google Reparaturen an der Pixel Watch ablehnt
Technische Bewertungen
Dieser iPhone 15 Plus-Deal vernichtet die Konkurrenz
Angebote
Hier ist der bisher günstigste Preis für das iPhone 15 ohne SIM-Karte
Angebote

También podría gustarte

Wie man

So überprüfen Sie die Anzahl der Batteriezyklen auf dem iPhone 15

vor 1 Minute 2 Minuten Mindestlesezeit
Wie man

So passen Sie die Aktionstaste des iPhone 15 Pro an

vor 10 Stunden 3 Minuten Mindestlesezeit
Wie man

So verhindern Sie, dass der Akku Ihres iPhone 15 zu mehr als 80 % aufgeladen wird

vor 12 Stunden 1 Minuten Mindestlesezeit
Wie man

Schützen Sie sofort Ihre digitale oder persönliche Sicherheit auf dem iPhone mit einem Notfall-Reset in Safety Check (iOS 17)

vor 12 Stunden 6 Minuten Mindestlesezeit
Wie man

iPhone 15 Pro: So legen Sie eine Standardbrennweite für die Kamera fest

vor 20 Stunden 2 Minuten Mindestlesezeit
Wie man

So wechseln Sie zwischen Stummschaltung/Lautlos-Modus und Klingelmodus auf dem iPhone 15 Pro

vor 1 Tag 3 Minuten Mindestlesezeit
Wie man

So speichern Sie Live-Fotos als Video in iOS 17

vor 2 Tagen 2 Minuten Mindestlesezeit
Wie man

iPhone 15: So laden Sie die Apple Watch, AirPods oder ein anderes iPhone auf

vor 2 Tagen 2 Minuten Mindestlesezeit
Zeig mehr
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Folge uns
© 2022 Themelocal. Alle Rechte vorbehalten.
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
Welcome Back!

Sign in to your account

Passwort vergessen?