Можно ли изменить изображения/иконки с помощью CSS?

Я пытаюсь радикально упростить меню в заголовке. Я не нашёл никаких решений от других, поэтому мой план — добавить в боковую панель несколько ссылок, которые нам действительно нужно сохранить, а затем оставить в меню заголовка только вкладку основных уведомлений. Я почти добился цели, но кликать по фотографии профиля, чтобы увидеть уведомления, неудобно, поэтому я пытаюсь заменить фотографию профиля на значок колокольчика. Это возможно?

Вот к чему я стремлюсь, но с колокольчиком вместо пустого квадрата вверху:

Извините, это кажется простым, но я уже несколько часов пытаюсь разобраться в этом в одиночку и не продвигаюсь ни на шаг!

Я думаю, что эта тема объясняет, как это сделать. Но я не знаю, работает ли это так же сейчас.

Хм, тогда, наверное, не получится. Я ещё не разобрался, как работать с JavaScript, поэтому хотел спросить, можно ли менять изображения или иконки, используя только CSS. Спасибо в любом случае!

Привет :wave:

Я создал простой компонент темы для этого. Только CSS.

Некоторые скриншоты
Screenshot 2024-08-29 at 10.04.52

Вот здесь вы можете увидеть это в действии.

А здесь вы найдете компонент темы.

Удивительно, спасибо!