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

[CaptainJ]

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:

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!

[Moin]

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

[CaptainJ]

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!

[Don]

@CaptainJ

I was wondering if there’s a way to swap images/icons using just CSS

Hello

I’ve made a simple theme component to achieve this. Only CSS.

Some screenshot

Here you can see it in live.

'Header Avatar to Bell Icon' by @Don

And here you can find the theme component.

GitHub - VaperinaDEV/header-avatar-to-bell-icon: This theme component will change the header avatar...

[CaptainJ]

Amazing, thank you!