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.

It contains two settings where you can:

1. Add the nav item prefix
2. Change the navigation bar on mobile. mobile navigation toggle enabled

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

---

mobile navigation toggle enabled

By default it will use the dropdown on mobile but you can change it to use the desktop version of navigation bar.

Default navigation bar

Desktop navigation bar