5
(1)

Icons in WordPress Menu Navigation einbinden

letzte Änderung: 27. Januar 2024


ACHTUNG! Bitte lesen!

Du benutzt das hier Gezeigte natürlich, wie immer, auf eigenes Risiko!
Ich habe alles selbst durchgeführt und mir mein System nicht zerschossen oder sonst irgendwelche negativen Auffälligkeiten bemerkt.

Aber dennoch… Backups sind immer gut….
Für WordPress-Backups am besten mit UpdraftPlus

Ich übernehme keine Haftung für irgendwelche Schäden am System, der Hardware oder der Katze…. :-P

Affiliate - Links

Auf meiner Seite verwende ich sogenannte Affiliate-Links, diese sind mit einem gekennzeichnet, damit du diese auch direkt erkennen kannst.

Sobald du über so einen Link das Produkt kaufen würdest, erhalte ich möglicherweise eine Provision vom jeweiligen Anbieter.
Außerdem entstehen für Dich natürlich keine zusätzlichen Kosten!
Mich unterstützt du damit aber enorm und trägst dazu bei, dass es auch in Zukunft weitere Guides und Vorstellungen von mir hier geben wird.

Ich empfehle nur Tools / PlugIns / Anbieter / Produkte, hinter denen ich auch wirklich stehe, bzw. ich auch einen Mehrwert sehe.

DarkWolfCave.de ist Teilnehmer des Amazon-Partnerprogramm, das zur Bereitstellung eines Mediums für Webseiten konzipiert wurde, mittels dessen durch die Platzierung von Partner-Links zu Amazon.de Entgelte verdient werden können.

code

Du möchtest wissen wie du eigene, bzw. freie Icons in WordPress Menü-Navigation mit einbauen kannst?! Du möchtest deine Navigation etwas aufpeppen?!
Dann ließ einfach weiter und du wirst am Ende deine eigenen Icons in deinem Menü haben.

Was wir für die eigenen Icons in WordPress benötigen

Auf jeden Fall die entsprechenden Icons / Webfonts. Ob du hier selbst kreativ bist und diese erstellen kannst, oder ob du fertige nutzen möchtest liegt an deinen Fähigkeiten. Da meine künstlerischen Fähigkeiten sich irgendwo versteckt haben, nutze ich die Free-Version von FontAwesome. Wie man diese lokal auf seinem eigenen Webserver installiert und von dort abruft, habe ich in diesem Artikel erklärt: https://darkwolfcave.de/font-awesome-lokal-bei-wordpress-einbinden/.

Bauen wir sie in unsere Navigation ein

Nachdem du die Grundvoraussetzungen mit FontAwesome geschaffen hast um Icons in WordPress einbauen zu können, fügen wir jetzt noch den entsprechenden Code an die richtige Stelle ein.
Denn wir wollen ja endlich unsere Icons auf unserem Blog betrachten können.

Ich beziehe mich jetzt auf das Theme GeneratePress, welches ich selbst auch hier benutze – es kann also sein, dass die Menüs bei dir etwas anders sind / anders aussehen. Aber grundsätzlich sollte es bei fast allen Themes so oder so ähnlich funktionieren.

Icons in WordPress Navigation

Wir wollen unser Menü bearbeiten. Also gehen wir über “Design” zu “Menüs” und erstellen uns ein individuellen Menüpunkt – oder ändern ein bereits vorhandenen. In meinem Fall wäre das jetzt “Support”.

Icons in WordPress

Bei URL kannst du nun eintragen welche Seite geöffnet werden soll wenn jemand auf diesen Link klickt.
Bei Link-Text kommt jetzt unser Icon hinein (hier kannst du nach dem Icon-Namen suchen: https://fontawesome.com/icons und herauskopieren).
Das ganze sieht dann in meinem Fall so aus:

<i class="fab fa-discord fa-lg"> Support</i>

Jetzt noch den Button “Zum Menü hinzufügen” und das Menü speichern.
Sollte jetzt alles richtig sein, dann sieht du nach einem neu laden deiner Seite auch endlich dein gewähltes Icon in deiner Navigation.
Dies kannst du mit jedem Menüpunkt ganz nach deinem Geschmack durchführen. Möchtest du nur das Icon sehen, kannst du auch den Text weglassen (in meinem Fall “Support”).
Du weißt jetzt wie man Icons in WordPress hinzufügen kann. Ich hoffe es hat dir ein wenig geholfen. Bei Problemen oder Fragen kannst du dich gerne über die Kommentare oder Discord bei mir melden.

Trage dich in den Newsletter ein!

Sie sehen gerade einen Platzhalterinhalt von Cloudflare Turnstile Captcha. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Weitere Informationen

Gefällt dir der Beitrag?
Hinterlasse gerne ein paar Sterne!

Wie hilfreich war dieser Beitrag für Dich?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 1

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Es tut uns leid, dass der Beitrag für dich nicht hilfreich war!

Lasse uns diesen Beitrag verbessern!

Wie können wir diesen Beitrag verbessern?

Abonnieren
Benachrichtige mich bei
guest
0 Kommentare
Inline Feedbacks
Alle Kommentare anzeigen