Die meisten WordPress-Seiten wirken unprofessionell, wenn sie für Social-Media-Icons auf unscharfe Bilddateien zurückgreifen. Die bessere Lösung ist, Font Awesome zu WordPress hinzuzufügen, was Ihnen gestochen scharfe, skalierbare Icons liefert, die in Sekundenschnelle aktualisiert werden können.
In diesem Leitfaden zeige ich Ihnen Schritt für Schritt, wie Sie es einrichten, damit Sie scharfe, professionelle Icons auf Ihrer Website erhalten, ohne die übliche Frustration.
Schnelle Schritte zum Hinzufügen von anpassbaren Font Awesome Icons zu WordPress:
Was ist Font Awesome und warum sollte man es verwenden?
Font Awesome ist eine riesige Icon-Bibliothek mit Tausenden von gebrauchsfertigen Designs, von Social-Media-Logos bis hin zu Pfeilen und Navigations-Icons. Anstatt sperrige Bilddateien hochzuladen, können Sie ein scharfes, skalierbares Icon einfügen, das immer gut aussieht.
Die Bibliothek enthält über 7.000 Icons, und da sie vektorbasiert sind, lassen sie sich ohne Qualitätsverlust skalieren. Das macht sie schnell ladend, leichtgewichtig und perfekt, um Ihre WordPress-Website schnell zu halten.
Sie funktionieren auch in allen modernen Browsern und Geräten, sodass Ihre Website überall konsistent 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: Font Awesome mit SeedProd hinzufügen
Wir verwenden für die erste Methode SeedProd, da Sie damit mehr Freiheit haben, wo Sie Icon-Schriften auf Ihrer Website verwenden können.
SeedProd ist der beste Drag-and-Drop-WordPress-Page-Builder auf dem Markt. Er verfügt nicht nur über 1400 integrierte Font Awesome Icons, sondern auch über eine Icon-Box, die 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, Landing Pages, Header, Footer oder Sidebars erstellen und Font Awesome Icons mit Drag-and-Drop überall in diesen Layouts verwenden.
Befolgen Sie die folgenden einfachen Schritte, um Icon-Schriften mit SeedProd zu WordPress hinzuzufügen.
Schritt 1. SeedProd installieren und aktivieren
Das erste, was Sie tun müssen, ist, SeedProd auf Ihrer WordPress-Website zu installieren und zu aktivieren. Obwohl es eine kostenlose Version von SeedProd gibt, verwenden wir für diesen Leitfaden die Pro-Version, da sie die Icon-Box-Funktion enthält.
Weitere Details finden Sie in diesem Leitfaden für Anfänger, wie Sie ein WordPress-Plugin installieren.
Nach der Installation des Plugins gehen Sie zu SeedProd » Einstellungen und geben Sie Ihren Plugin-Lizenzschlüssel ein.
Ihren Lizenzschlüssel finden Sie 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.
Besuchen Sie als Nächstes SeedProd » Seiten in Ihrem WordPress-Adminbereich und klicken Sie auf die Schaltfläche Neue Landing Page hinzufügen.
Schritt 2. Wählen Sie eine vorgefertigte Vorlage
Auf dem n ilde{a}chsten Bildschirm k ilde{o}nnen Sie eine Vorlage ausw ilde{a}hlen, die als Ausgangspunkt f ilde{u}r Ihre Seite dient. Mit ilde{A}ber 180 professionell gestalteten Vorlagen k ilde{o}nnen Sie jedes Design an die Bed ilde{A}rfnisse Ihrer Website anpassen.
Profi-Tipp: Sie k ilde{o}nnen auch die Theme-Builder-Funktion von SeedProd verwenden, um mit der gleichen Page-Builder-Funktionalit ilde{a}t ein benutzerdefiniertes WordPress-Theme von Grund auf neu zu erstellen.
Um eine Vorlage auszuw ilde{a}hlen, bewegen Sie Ihre Maus ilde{A}ber die Miniaturansicht und klicken Sie auf das Symbol 'H ilde{a}kchen'.
F ilde{A}r dieses Tutorial verwenden wir die Vorlage "eBook Sales Page", Sie k ilde{o}nnen jedoch jedes beliebige Design verwenden.
Nachdem Sie Ihre Vorlage ausgew ilde{a}hlt haben, k ilde{o}nnen Sie Ihrer Seite einen Namen geben. Das Plugin generiert automatisch eine URL basierend auf dem von Ihnen eingegebenen Titel, aber Sie k ilde{o}nnen diese jederzeit auf der Einstellungsseite ilde{A}ndern.
Wenn Sie mit dem Namen und der URL Ihrer Seite zufrieden sind, klicken Sie auf die Schaltfl ilde{a}che Speichern und Seite bearbeiten starten.
Nachdem Sie auf die Schaltfl ilde{a}che geklickt haben, gelangen Sie zum SeedProd Page Builder, wo Sie Ihr Design anpassen k ilde{o}nnen.
Schritt 3. Font Awesome Icons hinzufügen
Der Drag-and-Drop-Editor von SeedProd zeigt eine Live-Vorschau Ihrer Seite auf der rechten Seite und mehrere Bl ilde{A}cke und Einstellungen auf der linken Seite an.
Im linken Men ilde{A} k ilde{o}nnen Sie neue Inhaltsbl ilde{A}cke in Ihr Design ziehen, wie z. B. Countdown-Timer, Social-Share-Buttons, Kontaktformulare und mehr.
Um einen Block anzupassen, den Ihre Vorlage bereits verwendet, klicken Sie darauf und Sie sehen die Anpassungseinstellungen in der linken Seitenleiste.
Sie k ilde{o}nnen beispielsweise den Inhalt und die Farben eines Blocks ilde{A}ndern, Hintergrundbilder hinzuf ilde{A}gen oder das Farbschema und die Schriftarten ilde{A}ndern, um sie besser an Ihre Marke anzupassen.
Um Font Awesome-Icon-Schriften zu Ihrer Seite hinzuzuf ilde{A}gen, suchen Sie den Block "Icon" in der linken Spalte und ziehen Sie ihn in Ihr Design.
Sie sehen standardm ilde{a} ilde{A}ig ein "Pfeil"-Symbol, aber Sie k ilde{o}nnen darauf klicken, um es durch ein besseres Font Awesome-Symbol zu ersetzen, das Ihren Anforderungen entspricht.
Wenn der Icon-Block ausgew ilde{a}hlt ist, gehen Sie zum Einstellungsfenster, fahren Sie mit der Maus ilde{A}ber die Schaltfl ilde{a}che "Icon-Bibliothek" und klicken Sie darauf.
Jetzt sehen Sie eine Bibliothek mit verschiedenen Font Awesome-Symbolen, die Sie verwenden k ilde{o}nnen. Scrollen Sie einfach durch die Bibliothek oder geben Sie einen bestimmten Symbolnamen in das Suchfeld ein, um die benötigte Schriftart zu finden.
Klicken Sie von dort darauf, und SeedProd f ilde{A}gt es Ihrem Layout hinzu.
Nachdem Sie ein Symbol ausgew ilde{a}hlt haben, k ilde{o}nnen Sie die Symbolfarbe, -gr ilde{o} ilde{A} ilde{A}e, -ausrichtung und den Link anpassen.
Alternativ k ilde{o}nnen Sie die Icon Box von SeedProd verwenden, um Schriftart-Symbole mit einer ilde{A} ilde{A}berschrift und Beschreibung hinzuzuf ilde{A}gen. Sie k ilde{o}nnen den Block genauso anpassen wie den Icon-Block, aber auch zus ilde{a} ilde{A}tzliche Informationen f ilde{A}r Ihre Besucher einf ilde{A}gen.
Arbeiten Sie weiter an Ihrer Seite, bis Sie mit dem Ergebnis zufrieden sind.
Hier sind einige weitere M ilde{A}glichkeiten, SeedProd zu verwenden, um Icon-Schriften in Ihr WordPress-Theme einzuf ilde{A}gen:
Verwenden Sie den Block "Soziale Profile", um benutzerdefinierte Social-Media-Symbole zu Ihrer Website hinzuzuf ilde{A}gen.
Passen Sie Ihren Header an und verwenden Sie den Block "Men ilde{A} Warenkorb", um einen Warenkorb-Men ilde{A}punkt zu Ihrem Online-Shop hinzuzuf ilde{A}gen.
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 live zu schalten.
Von dort aus können Sie Ihre neue Seite besuchen, um zu sehen, wie sie aussieht.
Alternative Methode: Verwendung des Font Awesome Plugins
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.
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 es 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 Font Awesome Icon-Shortcode hinzuzufügen.
Klicken Sie einfach auf das „+“-Symbol und suchen Sie nach „Shortcode“, dann klicken Sie darauf, wenn der Block erscheint.
Sobald Sie das getan haben, können Sie jedes Icon hinzufügen, indem Sie den folgenden Shortcode-Schnipsel kopieren und einfügen:
[icon name= "rocket"]
Sie müssen nur „rocket“ durch den Namen des Icons ersetzen, das Sie anzeigen möchten. Um den Icon-Namen zu erhalten, besuchen Sie die CDN-Website von Font Awesome: fontawesome.com/icons und klicken Sie auf das kostenlose Icon, das Sie verwenden möchten.
Kopieren Sie von dort den Icon-Namen, um ihn in Ihre Zwischenablage zu speichern.
Fügen Sie nun den Namen in den Shortcode-Block ein und klicken Sie auf Veröffentlichen, um Ihre Änderungen live zu schalten.
Sie können nun Ihren Beitrag besuchen, um das Icon in Aktion zu sehen.
FAQs zum Hinzufügen von Font Awesome zu WordPress
functions.php einbinden oder auf das CDN verlinken.[icon name="coffee"] hinzufügen oder HTML wie <i class="fas fa-coffee"></i> einfügen. 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 gestalten können.Ich hoffe, dieser Leitfaden hat Ihnen geholfen zu lernen, wie Sie Font Awesome schnell und einfach in WordPress hinzufügen können. Bevor Sie gehen, genießen Sie vielleicht auch diesen Leitfaden, wie Sie ein Menü in WordPress bearbeiten, um Ihre Menüpunkte anzupassen.
Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
