ThemeLocal - 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
Neuesten Nachrichten
Ton und Bild: Alexa Ambient Experience AI könnte der nächste Sprung für Fernseher sein
Technische Bewertungen
Strg+Alt+Entf: Framework Laptop 16 ist ein großer Schritt in Richtung Aufrüstbarkeit
Technische Bewertungen
Die Sony PS5 hat einen sehr seltenen Preissturz bekommen
Angebote
Schnellladung: Die 200-Megapixel-Kamera des Redmi Note 12 Pro Plus 5G glänzt hell im Mittelklasse-Markt
Technische Bewertungen
Bewertung der Princess Smart Infrarotheizung
Technische Bewertungen
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 1 Jahr 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

Dolby Vision vs HDR10: Wie unterscheiden sie sich, was ist besser?

So konvertieren Sie RAW in JPG

So verwenden Sie das Schwarzpunkt-Tool zum Bearbeiten von iPhone-Fotos und warum Sie dies möglicherweise möchten

So beantworten Sie Anrufe mit AirPods mit Siri

So aktivieren Sie den Dunkelmodus bei NordVPN

MARKIERTE: einfach, fügen, ganz, hinzu, Ihrem, Sie, Symbolschriften, WordPressTheme
ThemeLocal 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

Philips Hue Centris im Test
Technische Bewertungen
So löschen Sie eine Playlist von Ihrem iPhone
Wie man
MacBook Pro (2023) vs. iPad Pro (2022): Was ist der Unterschied?
Gegen
Bewertung: OWC ThunderBay 8 bietet hochvolumigen, leistungsstarken Mac-Speicher
Technische Bewertungen
Vertrauenswürdige Empfehlungen: Samsungs 5-Sterne-Fernseher blendet
Technische Bewertungen
So beheben Sie eine ungenaue Apple Watch-Schrittverfolgung
Wie man

También podría gustarte

Gegen

Dolby Vision vs HDR10: Wie unterscheiden sie sich, was ist besser?

vor 2 Tagen 7 Minuten Mindestlesezeit
Wie man

So konvertieren Sie RAW in JPG

vor 2 Tagen 2 Minuten Mindestlesezeit
Wie man

So verwenden Sie das Schwarzpunkt-Tool zum Bearbeiten von iPhone-Fotos und warum Sie dies möglicherweise möchten

vor 2 Tagen 3 Minuten Mindestlesezeit
Wie man

So beantworten Sie Anrufe mit AirPods mit Siri

vor 3 Tagen 3 Minuten Mindestlesezeit
Wie man

So aktivieren Sie den Dunkelmodus bei NordVPN

vor 3 Tagen 2 Minuten Mindestlesezeit
Wie man

So ändern Sie den Desktop-Hintergrund in Windows 11

vor 3 Tagen 2 Minuten Mindestlesezeit
Angebote

Mit diesem Pixel 6a-Angebot erhalten Sie unbegrenzte Daten zum günstigen Preis

vor 3 Tagen 2 Minuten Mindestlesezeit
Wie man

So duplizieren Sie Fotos und Videos auf iPhone und iPad

vor 3 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

Removed from reading list

Rückgängig machen
Welcome Back!

Sign in to your account

Passwort vergessen?