Discourse Nav Item Icon / Emoji

:information_source: Zusammenfassung Füge ein Symbol / Emoji vor dem Navigationspunkt hinzu
:hammer_and_wrench: Repository GitHub - VaperinaDEV/discourse-nav-item-icon-emoji: Add Icon / Emoji before nav item
:question: Installationsanleitung So installierst du ein Theme oder eine Theme-Komponente
:open_book: Neu bei Discourse Themes? Anfängerleitfaden zur Verwendung von Discourse Themes

Installiere diese Theme-Komponente

Hallo :wave:

Mit dieser Theme-Komponente kannst du ein Symbol oder Emoji vor Navigationspunkten hinzufügen. Die Theme-Komponente basiert auf Discourse Easy 'SVG Icon' and 'Emoji' in CSS.

nav item prefix

Diese Einstellung kann auch Symbole und Emojis verarbeiten.

Die Regel, der du folgen musst, ist:

Symbol

Wenn du ein Symbol vor einem Navigationspunkt hinzufügen möchtest:
icon:nav-item:icon-set:icon-name:icon-color

Zuerst musst du den Typ definieren, der icon ist, wenn du ein Symbol vor dem Navigationspunkt hinzufügen möchtest.

  • nav-item: latest, hot, new, unread, categories usw. …
  • icon-set: brands, regular, solid
  • icon-color: currentColor, HEX oder Farbvariable

Zum Beispiel:
icon:latest:solid:rocket:currentColor
icon:top:regular:star:var(--gold)
icon:unseen:solid:compass:#228C22

icon


Emoji

Wenn du ein Emoji vor einem Navigationspunkt hinzufügen möchtest:
emoji:nav-item:emoji-set:emoji-name:filter

Zuerst musst du den Typ definieren, der emoji ist, wenn du ein Emoji vor dem Navigationspunkt hinzufügen möchtest.

  • nav-item: latest, hot, new, unread, categories usw. …
  • emoji-set: apple, google, twitter, win10, google_classic, facebook_messenger
  • filter: Dies färbt das Emoji im hellen Modus schwarz und im dunklen Modus weiß. Wenn das Emoji mit der Maus darüber gefahren oder aktiv ist, wird es mit einer Übergangsanimation angezeigt. (optional)
    emoji-filter

Zum Beispiel:
emoji:latest:twitter:rocket:filter
emoji:top:google:star
emoji:new:facebook_messenger:bell

Desktop-Navigation

emoji

Mobile Navigation

8 „Gefällt mir“

Sehr cool, Don. Gibt es eine Möglichkeit, dies mit FontAwesome Pro zum Laufen zu bringen? Ich verwende leichte Icons…

1 „Gefällt mir“

Ja, ich denke, das ist möglich, aber leider habe ich keinen Zugriff auf das Pro-Icon-Set. Es funktioniert mit Icon-SVGs. Wenn Sie also darauf zugreifen können, sollte es funktionieren. Es erfordert eine kleine Änderung der Komponente und das Hinzufügen dieser SVGs. Danach können Sie es mit den Einstellungen verwenden. Und auch wichtig ist die rechtliche Nutzung der Pro-Icons-SVGs auf der Website, wovon ich mir nicht sicher bin.

2 „Gefällt mir“

Warum gibt es keine Folge-Diskussion :rofl: ? Bei jedem Thema, das du erstellst, möchte ich eine Benachrichtigung!, wie der Begriff schon sagt… DU ROCKST ES!

1 „Gefällt mir“

Nach dem Update von Discourse wird das Symbol auf dem mobilen Endgerät nicht angezeigt, was zu Verwirrung führt. Ist jemand in der gleichen Situation wie ich??

Das sieht auf deinem Screenshot nach der Desktop-Ansicht aus (gemessen am Hamburger-Symbol in der linken Ecke), aber die Komponente funktioniert bei mir auf dem Handy. :thinking:

Ich stimme dem zu, was @sheng_hualuo über die neue Navigation (Dropdown) sagt; sie erscheint nicht.

Ich sehe es auch im Dropdown-Menü. :denkend:

Ja, tut mir leid, diese Theme-Komponente und meine anderen, die die Navigationsleiste modifiziert haben, müssen aktualisiert werden, seit diese Änderung DEV: replace list control nav dropdown with DMenuMobile (#28324) · discourse/discourse@931485b · GitHub. Ich werde über eine Lösung nachdenken. Wir können die Nav-Elemente im Modal leicht ansprechen, aber das ausgewählte hat leider keine spezifische Klasse und ich denke, wir müssen die Desktop-Navigationen aus den Komponenten entfernen.

4 „Gefällt mir“

Hallo :wave:

Ich habe ein Update für diese Komponente vorgenommen.

  1. Entfernt die Desktop-Navigationsversion auf Mobilgeräten
  2. Fügt Kompatibilität zur neuen mobilen Navigation hinzu

Leider können wir hier nichts hinzufügen, da dieser Abschnitt keine spezifische Navigations-Item-Klasse hat.
Screenshot 2024-08-19 at 19.52.18

2 „Gefällt mir“

Vielen Dank für die Korrektur, aber es tut mir sehr leid, dass die Desktop-Version entfernt wurde, da sie auf meiner Website großartig aussieht.

2 „Gefällt mir“