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

Dev
1

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
Screenshot 2024-08-28 at 01.11.36464×1308 31.2 KB

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!

1 Like
2

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

3

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!

4

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.

And here you can find the theme component.

5 Likes
5

Amazing, thank you!

1 Like