Hinweis: Der folgende Artikel hilft Ihnen weiter: So fügen Sie ganz einfach Font Awesome zu Ihrem WordPress-Theme hinzu
Möchten Sie Font Awesome-Symbole zu Ihrer WordPress-Website hinzufügen?
Font Awesome ist ein beliebtes Icon-Font-Toolkit, das eine umfangreiche Sammlung skalierbarer Vektorsymbole bereitstellt, die wie Web-Schriftarten geladen werden. Durch das Hinzufügen von Font Awesome zu Ihrem WordPress-Theme können Sie dessen Erscheinungsbild und Benutzererfahrung verbessern und die Geschwindigkeit Ihrer WordPress-Site verbessern.
In diesem Tutorial zeigen wir Ihnen Schritt für Schritt, wie Sie Font Awesome-Symbole zu WordPress hinzufügen.
Was ist eine tolle Schriftart und warum sollten Sie sie verwenden?
Laut der Font Awesome-Website handelt es sich um „die Symbolbibliothek und das Toolkit des Internets, die von Millionen von Designern, Entwicklern und Inhaltserstellern verwendet werden“. Einfach ausgedrückt handelt es sich dabei um kleine Bilder, die Sie Ihrer Website anstelle von Zahlen oder Buchstaben hinzufügen können.
Die Font Awesome-Bibliothek umfasst über 7.000 Symbole, die verschiedene Kategorien abdecken, darunter Social-Media-Symbole, Pfeile, Navigationssymbole und mehr.
Das Beste an Font Awesome und Symbolschriftarten im Allgemeinen ist, dass sie skalierbar sind, was bedeutet, dass Sie ihre Größe ändern können, ohne ihre Qualität zu verlieren. Da sie vektorbasiert sind, werden sie schnell und effizient geladen, wodurch Ihre Website schneller wird.
Darüber hinaus sind Font Awesome-Symbole mit den meisten modernen Webbrowsern und Geräten kompatibel, sodass Ihre Website gut aussieht und auf allen Plattformen gut funktioniert.
Darüber hinaus lassen sich diese Symbole ganz einfach anpassen, sodass Sie Farbe, Größe und andere Eigenschaften problemlos ändern können, um sie an das Design und Branding Ihrer Website anzupassen.
Schauen wir uns nun an, wie Sie Font Awesome zu Ihrem WordPress-Theme hinzufügen können. Über die folgenden Quicklinks können Sie sofort zur gewünschten Methode springen.
Anpassbare Methode: Hinzufügen von Font Awesome mit SeedProd
Für die erste Methode verwenden wir SeedProd, da Sie dadurch mehr Freiheit bei der Verwendung von Schriftsymbolen auf Ihrer Website haben.
SeedProd ist der beste Drag-and-Drop-WordPress-Seitenersteller auf dem Markt. Es sind nicht nur über 1400 Font Awesome-Symbole integriert, sondern auch ein Symbolfeld, das Sie zu jeder Seite hinzufügen können, ohne HTML-Code oder CSS-Klassen schreiben zu müssen.
Mit SeedProd können Sie benutzerdefinierte WordPress-Themes, Landingpages, Kopf- und Fußzeilen oder Seitenleisten erstellen und Font Awesome-Symbole per Drag-and-Drop überall in diesen Layouts verwenden.
Befolgen Sie die einfachen Schritte unten, um mit SeedProd Symbolschriftarten zu WordPress hinzuzufügen.
Schritt 1. Installieren und aktivieren Sie SeedProd
Als Erstes müssen Sie SeedProd auf Ihrer WordPress-Website installieren und aktivieren. Obwohl es eine kostenlose Version von SeedProd gibt, verwenden wir für dieses Handbuch die Pro-Version, da diese die Symbolbox-Funktion enthält.
Weitere Informationen finden Sie in diesem Anfängerleitfaden auf wie man ein WordPress-Plugin installiert.
Gehen Sie nach der Installation des Plugins zu SeedProd » Einstellungen und geben Sie Ihren Plugin-Lizenzschlüssel ein.
Ihren Lizenzschlüssel finden Sie in Ihrem Konto unter SeedProd-Website im Bereich Downloads.
Klicken Sie nach dem Einfügen Ihres Lizenzschlüssels auf Schlüssel überprüfen Taste.
Nächster Besuch SeedProd » Seiten von Ihrem WordPress-Administrator aus und klicken Sie auf Neue Landingpage hinzufügen Taste.
Schritt 2. Wählen Sie eine vorgefertigte Vorlage
Auf dem nächsten Bildschirm können Sie eine Vorlage auswählen, die Sie als Ausgangspunkt für Ihre Seite verwenden möchten. Mit über 180 professionell gestalteten Vorlagen können Sie jedes Design an die Anforderungen Ihrer Website anpassen.
Profi-Tipp: Sie können auch die Theme-Builder-Funktion von SeedProd verwenden, um mit derselben Page-Builder-Funktionalität ein benutzerdefiniertes WordPress-Theme von Grund auf zu erstellen.
Um eine Vorlage auszuwählen, bewegen Sie die Maus über die Miniaturansicht und klicken Sie auf das „Häkchen“-Symbol.
Für dieses Tutorial verwenden wir die Vorlage „E-Book-Verkaufsseite“. Sie können jedoch jedes beliebige Design verwenden.
Nachdem Sie Ihre Vorlage ausgewählt haben, können Sie Ihrer Seite einen Namen geben. Das Plugin generiert automatisch eine URL basierend auf dem von Ihnen eingegebenen Titel. Sie können dies jedoch jederzeit auf der Einstellungsseite ändern.
Wenn Sie mit Ihrem Seitennamen und Ihrer URL zufrieden sind, klicken Sie auf Speichern Sie und beginnen Sie mit der Bearbeitung der Seite Taste.
Nachdem Sie auf die Schaltfläche geklickt haben, gelangen Sie zum SeedProd-Seitenersteller, wo Sie Ihr Design anpassen können.
Schritt 3. Fügen Sie Font Awesome-Symbole hinzu
Der Drag-and-Drop-Editor von SeedProd zeigt rechts eine Live-Vorschau Ihrer Seite und links mehrere Blöcke und Einstellungen an.
Über das Menü auf der linken Seite können Sie neue Inhaltsblöcke in Ihr Design ziehen, z. B. Countdown-Timer, Schaltflächen zum Teilen in sozialen Netzwerken, Kontaktformulare und mehr.
Um einen Block anzupassen, den Ihre Vorlage bereits verwendet, klicken Sie darauf. Die Anpassungseinstellungen werden dann in der linken Seitenleiste angezeigt.
Sie können beispielsweise den Inhalt und die Farben eines Blocks ändern, Hintergrundbilder hinzufügen oder das Farbschema und die Schriftarten ändern, um sie besser an Ihre Marke anzupassen.
Um Font Awesome-Symbolschriftarten zu Ihrer Seite hinzuzufügen, suchen Sie den Block „Symbol“ in der linken Spalte und ziehen Sie ihn auf Ihr Design.
Standardmäßig wird ein „Pfeil“-Symbol angezeigt. Sie können jedoch darauf klicken, um es durch ein besseres Font Awesome-Symbol zu ersetzen, das Ihren Anforderungen entspricht.
Gehen Sie bei ausgewähltem Symbolblock zum Einstellungsfeld, bewegen Sie den Mauszeiger über die Schaltfläche „Symbolbibliothek“ und klicken Sie darauf.
Jetzt sehen Sie eine Bibliothek mit verschiedenen Font Awesome-Symbolen, die Sie verwenden können. Scrollen Sie einfach durch die Bibliothek oder geben Sie einen bestimmten Symbolnamen in das Suchfeld ein, um das gewünschte Schriftartensymbol zu finden.
Klicken Sie dort darauf und SeedProd fügt es Ihrem Layout hinzu.
Nachdem Sie ein Symbol ausgewählt haben, können Sie die Farbe, Größe, Ausrichtung und den Link des Symbols anpassen.
Alternativ können Sie die Symbolbox von SeedProd verwenden, um Schriftsymbole mit einer Überschrift und einer Beschreibung hinzuzufügen. Sie können den Block auf die gleiche Weise wie den Symbolblock anpassen, aber auch zusätzliche Informationen für Ihre Besucher hinzufügen.
Arbeiten Sie weiter an Ihrer Seite, bis Sie mit dem Aussehen zufrieden sind.
Hier sind einige andere Möglichkeiten, SeedProd zum Hinzufügen von Symbolschriftarten zu Ihrem WordPress-Theme zu verwenden:
Verwenden Sie den Block „Soziale Profile“, um benutzerdefinierte Social-Media-Symbole zu Ihrer Website hinzuzufügen.
Passen Sie Ihre Kopfzeile an und verwenden Sie den Menü-Warenkorb-Block, um einen Warenkorb-Menüpunkt zu Ihrem Online-Shop hinzuzufügen.
Schritt 4. Veröffentlichen Sie Ihre Änderungen
Wenn Sie mit Ihrer Seite zufrieden sind, klicken Sie auf Speichern Klicken Sie im Seitenersteller auf die Schaltfläche „Veröffentlichen“, und wählen Sie dann „Veröffentlichen“ aus, um Ihre Seite auf Ihrer WordPress-Site zu veröffentlichen.
Von dort aus können Sie Ihre neue Seite besuchen und sehen, wie sie aussieht.
Alternative Methode: Verwendung des Font Awesome Plugins
Eine weitere Möglichkeit, Symbolschriftarten zu Ihrer Website hinzuzufügen, ist mit Schriftart genial WordPress-Plugin. Mit dieser Methode können Sie Symbolschriftarten in Ihren Beiträgen und Seiten verwenden, haben jedoch nicht den gleichen Grad an Kontrolle und Anpassung wie mit der ersten Methode.
Dennoch ist es eine großartige Lösung, wenn Sie etwas anderes als ein Page Builder-Plugin verwenden möchten.
Laden Sie zunächst die neueste Version von Font Awesome aus dem WordPress-Plugin-Repository herunter und aktivieren Sie sie auf Ihrer Website.
Nach der Aktivierung des Plugins können Sie jeden Beitrag oder jede Seite erstellen oder bearbeiten und den Shortcode-WordPress-Block verwenden, um den Shortcode für das Font Awesome-Symbol hinzuzufügen.
Klicken Sie einfach auf das „+“-Symbol und suchen Sie nach „Shortcode“. Klicken Sie dann darauf, wenn der Block angezeigt wird.
Sobald Sie das getan haben, können Sie ein beliebiges Symbol hinzufügen, indem Sie den folgenden Shortcode-Snippet kopieren und einfügen:
Sie müssen lediglich „Rakete“ durch den Namen des Symbols ersetzen, das Sie anzeigen möchten. Um den Symbolnamen zu erhalten, besuchen Sie das CDN der Font Awesome-Website: Fontawesome.com/icons und klicken Sie auf das kostenlose Symbol, das Sie verwenden möchten.
Kopieren Sie von dort den Symbolnamen, um ihn in Ihrer Zwischenablage zu speichern.
Jetzt können Sie den Namen in den Shortcode-Block einfügen und klicken Veröffentlichen um Ihre Änderungen live zu machen.
Sie können jetzt Ihren Beitrag besuchen, um das Symbol in Aktion zu sehen.
Hier hast du es!
Wir hoffen, dass Ihnen dieser Leitfaden dabei geholfen hat, schnell und einfach zu lernen, wie Sie Font Awesome in WordPress hinzufügen. Bevor Sie loslegen, lesen Sie vielleicht auch diese Anleitung zum Bearbeiten eines Menüs in WordPress, um Ihre Menüelemente anzupassen.
Danke fürs Lesen. Bitte folgen Sie uns weiter YouTube, TwitterUnd Facebook für weitere hilfreiche Inhalte zum Wachstum Ihres Unternehmens.
