Is there a way to change tracking icons? [image] I’d like to try using loud-speaker as a base for all 4 icons. The circle makes little sense and I notice that my users never click there and don’t know what is that for. I think a different icon would bring their attention. [image]

I’d be tempted to put a picture of a letter on Watching, since that’s what we use to indicate “yes, you’ll get emailed on this category/topic” now that I think about it… there’s nothing really alarming to indicate a ! in the first place.

Add this to your custom CSS: .icon.fa.fa-circle.tracking::before { content: "\f0a1"; } That’s just the icon though. You could add a color, background color and radius to make a circle if you’re feeling fancy.

[image] Tom_Newsom: f0a1 And so for the envelope I want, I’ll use f003 I see that these can be looked up on FontAwesome: http://fortawesome.github.io/Font-Awesome/icon/envelope-o/ and snag the Unicode identifier. Thanks so much @Tom_Newsom

So, my completed set is: .icon.fa.fa-circle.tracking::before { content: "\f075"; } .fa.fa-circle.tracking::before { content: "\f075"; } .icon.fa.fa-exclamation-circle.watching::before { content: "\f003"; } .fa.fa-exclamation-circle.watching::before { content: "\f003"; } This leaves me with envelopes for topics which will get you emailed (watching), and a chat bubble for topics which will just notify you (tracking). [image] I don’t know how to put a blue circle around the envelope, but I think this is a great improvement over the Exclamation point.

[image] watchmanmonitor: I don’t know how to put a blue circle around the envelope, but I think this is a great improvement over the Exclamation point. It’s called “stacking” http://fortawesome.github.io/Font-Awesome/examples/ [image]

Wow, font awesome really is, well, awesome :smile:

Could anyone indulge me with the syntax of getting a stacked icon to instead of the normal icon? Circle-thin is a thing in Font-Awesome 4.1, and I’d love to put that around all the iconf for uniformity.

Changing an icon globally is very simple using APIs [image] Change icons globally Developer Guides This is an easy way to change a Discourse icon globally. Right click on the icon you want to change and select “Inspect element” or “Inspect” (depends on the browser) Find the icon name [image] Search a new icon here Find Icons with the Perfect Look & Feel | Font Awesome, e.g. external-link-alt Customize and add the code in your admin > customize > themes > edit code -> JS tab // {theme}/javascripts/discourse/api-initializers/init-theme.gjs import { apiInitializer } from "disco…

How to change notification level icons?

Product Support

dax (Daniela) May 18, 2018, 10:59am 9

Changing an icon globally is very simple using APIs

Topic		Replies	Views
Change icons globally Developer Guides how-to	26	10793	October 5, 2025
I can't change the notification icons Development	6	952	January 30, 2023
Font Awesome in text Product Support	1	201	January 20, 2025
How can change share link icon Product Support	2	1726	May 18, 2018
Change sharing icon on posts UX	5	2350	May 18, 2018

How to change notification level icons?

Related topics