Die meisten WordPress-Websites sehen unprofessionell aus, wenn sie sich auf unscharfe Bilddateien für Social-Media-Symbole verlassen. Die bessere Lösung ist das Hinzufügen von Font Awesome zu WordPress, mit dem Sie gestochen scharfe, skalierbare Icons erhalten, die sich in Sekundenschnelle aktualisieren lassen.
In dieser Anleitung zeige ich Ihnen Schritt für Schritt, wie Sie es einrichten können, damit Sie scharfe, professionelle Icons auf Ihrer Website erhalten, ohne dass Sie sich mit dem üblichen Frust herumschlagen müssen.
Schnelle Schritte zum Hinzufügen anpassbarer Font Awesome Icons zu WordPress:
Was ist Font Awesome und warum sollte man es verwenden?
Font Awesome ist eine riesige Symbolbibliothek mit Tausenden von gebrauchsfertigen Designs, von Logos für soziale Medien bis hin zu Pfeilen und Navigationssymbolen. Anstatt klobige Bilddateien hochzuladen, können Sie ein scharfes, skalierbares Symbol einfügen, das immer gut aussieht.
Die Bibliothek umfasst über 7.000 Icons, und da sie vektorbasiert sind, lässt sich ihre Größe ohne Qualitätsverlust ändern. Das macht sie schnell ladend, leicht und perfekt, um Ihre WordPress-Website schnell zu machen.
Sie funktionieren auch in allen modernen Browsern und auf allen Geräten, sodass Ihre Website überall einheitlich aussieht. Darüber hinaus können Sie Farbe, Größe und Stil leicht an Ihr Markendesign anpassen.
Als Nächstes gehen wir durch, wie Sie Font Awesome zu Ihrem WordPress-Theme hinzufügen.
Anpassbare Methode: Hinzufügen von Font Awesome mit SeedProd
Für die erste Methode werden wir SeedProd verwenden, weil es Ihnen mehr Freiheiten bei der Verwendung von Schriftsymbolen auf Ihrer Website gibt.
SeedProd ist der beste Drag-and-Drop WordPress Page Builder auf dem Markt. Es hat nicht nur über 1400 Font Awesome-Symbole eingebaut, sondern kommt auch mit einer Icon-Box, die Sie zu jeder Seite hinzufügen können, ohne HTML-Code oder CSS-Klassen zu schreiben.
Mit SeedProd können Sie benutzerdefinierte WordPress-Themes, Landing Pages, Header, Footer oder Sidebars erstellen und Font Awesome-Symbole überall in diesen Layouts per Drag-and-Drop verwenden.
Folgen Sie den einfachen Schritten unten, um mit SeedProd Icon-Fonts zu WordPress hinzuzufügen.
Schritt 1. Installieren und Aktivieren von 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 diese Anleitung die Pro-Version, da sie die Icon-Box-Funktion enthält.
Weitere Einzelheiten finden Sie in diesem Leitfaden für Einsteiger zur Installation eines WordPress-Plugins.
Nachdem Sie das Plugin installiert haben, gehen Sie zu SeedProd " Einstellungen und geben Ihren Plugin-Lizenzschlüssel ein.
Sie finden Ihren Lizenzschlüssel in Ihrem Konto auf der SeedProd-Website im Bereich Downloads.
Nachdem Sie Ihren Lizenzschlüssel eingefügt haben, klicken Sie auf die Schaltfläche Schlüssel überprüfen.
Als nächstes besuchen Sie SeedProd " Seiten in Ihrem WordPress-Admin und klicken auf die Schaltfläche Neue Landing Page hinzufügen.
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 Bedürfnisse Ihrer Website anpassen.
Pro-Tipp: Sie können auch die Theme-Builder-Funktion von SeedProd verwenden, um ein benutzerdefiniertes WordPress-Theme von Grund auf mit der gleichen Seiten-Builder-Funktion zu erstellen.
Um eine Vorlage auszuwählen, fahren Sie mit der Maus über die Miniaturansicht und klicken Sie auf das Symbol "Häkchen".
Für dieses Tutorial verwenden wir die Vorlage für die eBook-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 auf der Grundlage des von Ihnen eingegebenen Titels, aber Sie können diesen jederzeit auf der Einstellungsseite ändern.
Wenn Sie mit Ihrem Seitennamen und der URL zufrieden sind, klicken Sie auf die Schaltfläche Speichern und mit der Bearbeitung der Seite beginnen.
Nachdem Sie auf die Schaltfläche geklickt haben, gelangen Sie zum SeedProd Page Builder, wo Sie Ihr Design anpassen können.
Schritt 3. Font Awesome-Symbole hinzufügen
Der Drag-and-Drop-Editor von SeedProd zeigt auf der rechten Seite eine Live-Vorschau Ihrer Seite und auf der linken Seite verschiedene Blöcke und Einstellungen an.
Über das linke Menü können Sie neue Inhaltsblöcke auf Ihr Design ziehen, z. B. Countdown-Timer, Schaltflächen für soziale Netzwerke, Kontaktformulare und vieles mehr.
Wenn Sie einen Block, den Ihre Vorlage bereits verwendet, anpassen möchten, klicken Sie darauf und Sie sehen seine Anpassungseinstellungen in der linken Seitenleiste.
Sie können zum Beispiel 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-Symbolschriften zu Ihrer Seite hinzuzufügen, suchen Sie den Block "Icon" in der linken Spalte und ziehen ihn auf Ihr Design.
Standardmäßig wird ein "Pfeil"-Symbol angezeigt, aber Sie können darauf klicken, um es gegen ein besseres Font Awesome-Symbol auszutauschen, das Ihren Anforderungen entspricht.
Wenn Sie den Symbolblock ausgewählt haben, gehen Sie zum Einstellungsfeld, bewegen Sie den Mauszeiger auf die Schaltfläche "Symbolbibliothek" und klicken Sie darauf.
Jetzt sehen Sie eine Bibliothek mit verschiedenen Font Awesome-Symbolen, die Sie verwenden können. Blättern Sie einfach durch die Bibliothek oder geben Sie den Namen eines bestimmten Symbols in das Suchfeld ein, um das benötigte Schriftartsymbol zu finden.
Klicken Sie 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 Verknüpfung des Symbols anpassen.
Alternativ können Sie auch die Icon Box von SeedProd verwenden, um Schrift-Icons mit einer Überschrift und einer Beschreibung hinzuzufügen. Sie können den Block auf die gleiche Weise wie den Icon-Block anpassen, aber auch zusätzliche Informationen für Ihre Besucher einfügen.
Arbeiten Sie weiter an Ihrer Seite, bis Sie mit dem Aussehen zufrieden sind.
Hier sind einige andere Möglichkeiten, SeedProd zu verwenden, um Icon-Fonts in Ihr WordPress-Theme einzufügen:
Verwenden Sie den Block "Soziale Profile", um Ihrer Website benutzerdefinierte Symbole für soziale Medien hinzuzufügen.
Passen Sie Ihre Kopfzeile an, und fügen Sie mit dem Menu Cart-Block ein Warenkorb-Menüelement zu Ihrem Online-Shop hinzu.
Schritt 4. Veröffentlichen Sie Ihre Änderungen
Wenn Sie mit Ihrer Seite zufrieden sind, klicken Sie im Page Builder auf die Schaltfläche " Speichern" und wählen Sie dann "Veröffentlichen", um Ihre Seite auf Ihrer WordPress-Website zu veröffentlichen.
Von dort aus können Sie Ihre neue Seite besuchen, um zu sehen, wie sie aussieht.
Alternative Methode: Verwendung des Font Awesome Plugin
Eine weitere Möglichkeit, Icon-Schriften zu Ihrer Website hinzuzufügen, ist das Font Awesome WordPress Plugin. Mit dieser Methode können Sie Icon-Schriften in Ihren Beiträgen und Seiten verwenden, aber Sie haben nicht das gleiche Maß an Kontrolle und Anpassung wie bei der ersten Methode.
Das heißt, es ist eine großartige Lösung, wenn Sie etwas anderes als ein Seitenerstellungs-Plugin verwenden möchten.
Um loszulegen, laden Sie die neueste Version von Font Awesome aus dem WordPress-Plugin-Repository herunter und aktivieren Sie sie auf Ihrer Website.
Nachdem Sie das Plugin aktiviert haben, können Sie einen beliebigen Beitrag oder eine beliebige Seite erstellen oder bearbeiten und den Shortcode WordPress-Block verwenden, um den Font Awesome-Icon-Shortcode hinzuzufügen.
Klicken Sie einfach auf das "+"-Symbol, suchen Sie nach "Shortcode" und klicken Sie darauf, wenn der Block erscheint.
Danach können Sie ein beliebiges Symbol hinzufügen, indem Sie das folgende Shortcode-Snippet kopieren und einfügen:
[icon name="rocket"]
Sie müssen lediglich "rocket" durch den Namen des Symbols ersetzen, das Sie anzeigen möchten. Um den Namen des Symbols 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 dann den Namen des Symbols, um ihn in der Zwischenablage zu speichern.
Nun können Sie den Namen in den Shortcode-Block einfügen und auf Veröffentlichen klicken, um die Änderungen zu aktivieren.
Sie können nun Ihren Beitrag besuchen, um das Symbol in Aktion zu sehen.
FAQs zum Hinzufügen von Font Awesome zu WordPress
functions.php oder die Verknüpfung mit dem CDN.[icon name="coffee"]oder durch Einfügen von HTML wie <i class="fas fa-coffee"></i>. Jede Methode funktioniert in modernen WordPress-Editoren und kann mit CSS-Klassen gestaltet werden.fa-2x für größere Icons oder fa-spin für Rotationseffekte.Ich hoffe, diese Anleitung hat Ihnen geholfen zu lernen, wie Sie Font Awesome in WordPress schnell und einfach hinzufügen können. Bevor Sie gehen, können Sie auch diese Anleitung, wie man ein Menü in WordPress bearbeiten, um Ihre Menüelemente anpassen zu genießen.
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte beteiligen Sie sich an der Konversation auf YouTube, X und Facebook, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
