I’m trying to dramatically simplify the header menu. I haven’t found any solutions from others so my plan is to add the few links we actually need to keep to the sidebar and then let the header menu just show the main notifications tab. I’m nearly there but it’s confusing clicking on your profile photo to see notifications, so I’m trying to change the profile photo to a bell icon. Is this doable? This is what I’m aiming for, but having a bell where the blank box is at the top: [Screenshot 2024-08-28 at 01.11.36] Sorry, this seems like it should be simple but I’ve been trying to figure this out for hours by myself and not getting anywhere!

[image] CaptainJ: I was wondering if there’s a way to swap images/icons using just CSS Hello :wave: I’ve made a simple theme component to achieve this. Only CSS. Some screenshot [Screenshot 2024-08-29 at 10.04.52] Here you can see it in live. [image] 'Header Avatar to Bell Icon' by @Don A customization for Discourse shared on Discourse Theme Creator And here you can find the theme component. https://github.com/VaperinaDEV/header-avatar-to-bell-icon

i think this topic explains how to do it. But I don’t know whether it still works that way.

Hmm maybe not then. I haven’t figured out how to work with javascript yet so I was wondering if there’s a way to swap images/icons using just CSS. Thanks anyway!

Is there a way to change images/icons with CSS?

Development

CaptainJ August 29, 2024, 11:54am 5

Amazing, thank you!

Topic		Replies	Views
Adding icons rather than text UX custom-header-links	2	362	May 30, 2019
I can't change the notification icons Development	6	952	January 30, 2023
Central Theme Header User Icons Development	9	835	January 15, 2024
Change icon style in discourse Product Support	1	312	March 4, 2025
Is it possible to change the icon for staff notices? Development post-notices	4	468	August 29, 2025

Is there a way to change images/icons with CSS?

Related topics