So verwenden Sie Icon-Schriftarten im WordPress-Beitragseditor (ohne Code)

Möchten Sie Icon-Schriften im WordPress-Beitragseditor verwenden?

Icon-Schriftarten ermöglichen es Ihnen, Bilder und Symbole einfach in Texten zu verwenden. Sie sind leichtgewichtig und verlangsamen Ihre Website nicht, und sie können leicht auf jede Größe skaliert und wie jede andere Textschriftart formatiert werden.

In diesem Artikel zeigen wir Ihnen, wie Sie Symbolschriftarten einfach im WordPress-Beitragseditor verwenden können, ohne HTML-Code schreiben zu müssen.

Wir zeigen Ihnen mehrere Methoden, jede mit einem etwas anderen Ansatz als die andere. Sie können eine auswählen, die für Sie am besten funktioniert.

Methode 1. Hinzufügen von Icon-Schriftarten im WordPress-Beitrag-Editor mit JVM Rich Text Icons

Diese Methode wird für jede Art von WordPress-Website empfohlen. Sie ist einfach zu bedienen und funktioniert nahtlos mit dem Block-Editor.

Zuerst müssen Sie das Plugin JVM Rich Text Icons installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.

Nach der Aktivierung können Sie einfach einen WordPress-Beitrag oder eine Seite bearbeiten oder einen neuen erstellen. Fügen Sie im Beitragseditor einen neuen Absatzblock hinzu, und Sie sehen ein neues Flaggen-Symbol in der Block-Symbolleiste.

Ein Klick darauf öffnet ein Popup mit Symbolen zur Auswahl. Standardmäßig werden die beliebten Font Awesome Icon-Schriften verwendet.

Sie können die Suche verwenden, um nach einem Symbol zu suchen, oder einfach nach unten scrollen, um das gewünschte Symbol zu finden, und dann darauf klicken, um es hinzuzufügen.

Ein Vorteil der Verwendung von Icon-Schriften ist, dass Sie CSS verwenden können, um sie zu gestalten.

Da Sie jedoch bereits den Block-Editor verwenden, können Sie einfach die integrierten Farbwerkzeuge verwenden, um die Icons zu gestalten.

Das Plugin ermöglicht es Ihnen, Icon-Schriftarten in den meisten Textblöcken zu verwenden, wie z. B. Absatz, Liste, Button, Spalten, Cover und mehr.

Hier ist ein Beispiel für die Verwendung von Icon-Fonts und Blockoptionen zur Gestaltung von drei Spalten.

Ein weiteres nützliches Beispiel für die Verwendung von Icon-Schriftarten sind Schaltflächen.

Dieses Mal verwenden wir Inline-Icon-Schriftarten neben etwas Text für die beiden Schaltflächen.

Nutzen Sie die Werkzeuge des Block-Editors wie Textausrichtung, Farben, Abstände und mehr, um das Beste aus den Icon-Schriftarten herauszuholen.

Methode 2. Schriftarten für Symbole im WordPress-Beitragseditor mit Font Awesome hinzufügen

Diese Methode erfordert, dass Sie Shortcodes im Beitragseditor hinzufügen, um Icon-Schriften anzuzeigen. Sie können diese Methode verwenden, wenn Sie Icon-Schriften nicht regelmäßig in Ihren WordPress-Beiträgen und Seiten verwenden müssen.

Installieren und aktivieren Sie zuerst das Font Awesome Plugin. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.

Nach der Aktivierung können Sie einen Beitrag oder eine Seite in WordPress bearbeiten und den folgenden Shortcode verwenden, um ein Schrift-Symbol hinzuzufügen.

[icon name="home"]

Der Parameter „name“ ist hier der Name der von Font Awesome verwendeten Schriftart. Die vollständige Liste finden Sie auf der Seite Font Awesome Cheatsheet.

Sobald sie hinzugefügt sind, können Sie Ihren Beitrag oder Ihre Seite in der Vorschau anzeigen, um zu sehen, wie das Symbol auf der Live-Site aussieht, da es im Block-Editor nicht als Symbol angezeigt wird.

So sah es auf unserer Testseite aus.

Sie können den Shortcode innerhalb eines Absatzes und inline mit anderem Text verwenden. Sie können ihn auch eigenständig mit dem Block „Shortcode“ hinzufügen.

Die Verwendung des 'Shortcode'-Blocks bietet Ihnen jedoch nicht die Styling-Optionen, die Sie mit anderen Textblöcken erhalten.

Sie können auch den Shortcode innerhalb von Spalten hinzufügen, um eine Feature-Zeile zu erstellen.

Es wäre etwas kniffliger, da Sie die tatsächlichen Bilder nicht sehen können und die Spaltenhöhen sich im Editor ständig ändern.

So sah es auf unserer Testwebsite aus. Die Spalten sind gleich hoch, obwohl sie im Editor nicht gleich hoch sind.

Sie müssen Ihre Arbeit wahrscheinlich viele Male in einem neuen Browser-Tab in der Vorschau anzeigen, um zu sehen, wie sie für Benutzer aussieht.

Methode 3. Icon-Schriftarten mit WordPress Page Buildern verwenden

Diese Methode ist großartig, wenn Sie eine Landingpage erstellen oder Ihre Website mit einem WordPress-Seitenersteller wie SeedProd gestalten.

SeedProd ist der beste WordPress Page Builder auf dem Markt. Er ermöglicht es Ihnen, ganz einfach beeindruckende Landing Pages zu erstellen oder ein komplettes Website-Theme zu gestalten.

Zuerst müssen Sie das SeedProd-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie man ein WordPress-Plugin installiert.

Nach der Aktivierung werden Sie aufgefordert, Ihren Plugin-Lizenzschlüssel einzugeben. Diese Informationen finden Sie in Ihrem Konto auf der SeedProd-Website.

Nach Eingabe Ihres Lizenzschlüssels und Klick auf 'Schlüssel überprüfen' können Sie mit der Arbeit an Ihrer Landingpage beginnen.

Gehen Sie einfach zur Seite SeedProd » Landing Pages und klicken Sie auf die Schaltfläche „Neue Landing Page hinzufügen“.

Danach werden Sie aufgefordert, eine Vorlage für Ihre Landingpage auszuwählen.

SeedProd wird mit einer Reihe schöner Landingpage-Designs geliefert, die Sie als Ausgangspunkt verwenden können, oder Sie können mit einer leeren Vorlage beginnen und alles selbst gestalten.

Für dieses Tutorial verwenden wir eine vordefinierte Vorlage. Klicken Sie einfach auf eine Vorlage, um sie auszuwählen und fortzufahren.

Als Nächstes werden Sie aufgefordert, einen Titel für Ihre Landingpage anzugeben und eine URL auszuwählen.

Nachdem Sie diese eingegeben haben, klicken Sie auf die Schaltfläche „Speichern und Seite bearbeiten starten“, um fortzufahren.

SeedProd wird nun die Page Builder-Oberfläche starten. Es ist ein Drag-and-Drop-Design-Tool, bei dem Sie einfach auf ein beliebiges Element zeigen und klicken können, um es zu bearbeiten.

Sie können auch Blöcke aus der linken Spalte per Drag & Drop ziehen, um neue Elemente zu Ihrem Design hinzuzufügen.

Für dieses Tutorial fügen wir den Icon-Block hinzu.

Nachdem Sie den Block hinzugefügt haben, können Sie einfach auf ihn klicken, um seine Eigenschaften zu bearbeiten.

Die linke Spalte ändert sich und zeigt die Optionen für den Icon-Block an. Sie können in den Bereich „Icon“ auf der linken Seite klicken und ein anderes Icon-Bild auswählen oder Farbe und Stil ändern.

Eine weitere Möglichkeit, Icons in SeedProd zu verwenden, ist das Hinzufügen des Blocks „Icon Box“.

Der Unterschied zwischen diesem und dem zuvor verwendeten 'Icon'-Block besteht darin, dass 'Icon Box' es Ihnen ermöglicht, Text zusammen mit Ihrem gewählten Symbol hinzuzufügen.

Dies ist eine der häufigsten Möglichkeiten, Icons bei der Anzeige von Produkt-Features, Dienstleistungen und anderen Elementen zu verwenden.

Sie können Ihre Icon-Box in Spalten platzieren, Farben auswählen und die Icon-Größe nach Belieben anpassen.

Zusätzlich können Sie den begleitenden Text mit der Formatierungs-Symbolleiste von SeedProd formatieren.

Wenn Sie mit der Bearbeitung Ihrer Seite fertig sind, vergessen Sie nicht, oben rechts auf dem Bildschirm auf die Schaltfläche „Speichern“ zu klicken.

Wenn Sie bereit sind, können Sie auf „Veröffentlichen“ klicken, damit die Seite live geschaltet wird, oder Sie können auf „Vorschau“ klicken, um sicherzustellen, dass sie so aussieht, wie Sie es möchten.

Sie können auch auf „Als Vorlage speichern“ klicken, damit Sie dieses Design mit SeedProd auf anderen Teilen Ihrer Website wiederverwenden können.

So sahen die Icon-Schriftarten auf unserer Testwebsite aus.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Icon-Schriftarten im WordPress-Beitragseditor verwenden, ohne HTML-Code schreiben zu müssen. Möglicherweise möchten Sie auch unseren WordPress-Leistungsleitfaden lesen, um die Geschwindigkeit Ihrer Website zu optimieren, oder die besten Landingpage-Plugins für WordPress.

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