Discourse Nav Item Icon / Emoji

[Don]

	Summary	Add Icon / Emoji before nav item
	Repository	GitHub - VaperinaDEV/discourse-nav-item-icon-emoji: Add Icon / Emoji before nav item
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Hello

With this theme component you can add icon or emoji before nav items. The theme component based on Discourse Easy 'SVG Icon' and 'Emoji' in CSS.

nav item prefix

This setting can handle the icons and emojis too.

The rule you have to follow is:

Icon

If you want to add icon before a nav item:
icon:nav-item:icon-set:icon-name:icon-color

First you have to define the type which is icon if you want to add icon before the nav item.

• nav-item: latest, hot, new, unread, categories etc…
• icon-set: brands, regular, solid
• icon-color: currentColor, HEX or color variable

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

---

Emoji

If you want to add emoji before a nav item:
emoji:nav-item:emoji-set:emoji-name:filter

First you have to define the type which is emoji if you want to add emoji before the nav item.

• nav-item: latest, hot, new, unread, categories etc…
• emoji-set: apple, google, twitter, win10, google_classic, facebook_messenger
• filter: It makes the emoji color black in light mode and white in dark mode. If the emoji hovered or active it will be reveal with a transition. (optional)
  

For example:
emoji:latest:twitter:rocket:filter
emoji:top:google:star
emoji:new:facebook_messenger:bell

Desktop Navigation

Mobile Navigation

[davidkingham]

Very cool Don, any hope of getting this to work with FontAwesome Pro? I use light icons…

[Don]

Yeah, I think that’s possible but unfortunately I don’t have access to pro icon set. It works with icon svg so if you access to this than it should work. It requires to modify a little bit the component and add these SVGs. After that you can use it with the settings. And also important what is the legal usage of the pro icons svg on website what I am not sure.

[Aaron_Walsh]

Why isn’t there a follow-on discourse ? Every topic you create, I want a notification!, as the term calls it…YOU SMASH IT!

[sheng_hualuo (花落晓斩神)]

After updating Discourse, the mobile terminal does not display the icon, which causes confusion，Is there anyone in the same situation as me??

[Lilly]

That looks like desktop view in your screenshot (judging by the hamburger icon in left corner), but the component is working for me in mobile.

[Aaron_Walsh]

I agree with what @sheng_hualuo is saying about the new navigation (dropdown); it doesn’t appear.

[Lilly]

oh I see it in the drop down too.

[Don]

Yeah, sorry this theme component and my others too which modified the navigation bar has to an update since this change DEV: replace list control nav dropdown with DMenuMobile (#28324) · discourse/discourse@931485b · GitHub. I will thinking of a solution. We can target easily the nav items in modal but the selected has no specific class unfortunately and I think we have to drop the desktop navigations from components.

[Don]

Hello

I’ve made an update to this component.

1. removes desktop navigation version on mobile
2. adds compatibility to the new mobile navigation

Unfortunately we can’t add here as this section has not a nav item specific class.

DEV: fixes compatibility to the new mobile navigation

[sheng_hualuo (花落晓斩神)]

Thank you very much for the fix, but I am very sorry that the desktop version feature was removed, because it looks great with my website