Replace bell icon

Hi,

You can try adding this:
<i class=”fa fa-gift” style=”font-size:22px;color:#4B4B4B”></i>
to the ‘Bell icon or text’ field in Settings->General (you can change the font-size and color if you need to), or just enter any icon link or svg you have.

Thank you for your fast answer but it seems not to work. Just nothing appears or only an error icon:

https://ibb.co/mGwyhsH

Why does happen?

Hi,

What icon have you used and does it work anywhere else on your site?
Also, what happens when you enter plain text in the ‘Bell icon or text’ field?
Do you see the text or an error?

• This reply was modified 3 years ago by wpdever.

These are the different codes and the plugin responses:

1.
code: <i class="fa-solid fa-bell"></i>
response: error shape

2.
code: `<i class=”fa fa-gift” style=
”font-size:22px;color:#4B4B4B”></i>`
response: no display

3.
code size: 75% !important; background: ur (plain text)

Images:
https://ibb.co/KrdWRDG

• This reply was modified 3 years ago by alexg9.

Hi,

Can you maybe try to add and activate the Font awesome plugin , then try <i class="fa-solid fa-bell"></i> again?

Font Awesome 4.1.1 installed.
The same errors I’ve described above happen with all the codes

• This reply was modified 3 years ago by alexg9.

To make sure the problem isn’t font awesome, can you test this and save ?

<svg width="20" height="20" version="1.1" viewBox="0 0 800.00001 800.00001" xmlns="https://www.w3.org/2000/svg">

<g transform="translate(0 -252.36)" fill="#353535">

<path d="m359.46 341.17c-134.57 3.4551-183.04 131.52-190.11 200.44-27.31 347.03-80.955 359.79-146.05 363.31-17.863 0-17.609 29.706 0 29.706h753.4c17.609 0 17.863-29.706 0-29.706-65.096-3.5224-118.8-21.45-146.11-368.48-5.7731-65.039-55.477-191.82-190.05-195.27 0-119.38-79.898-116.36-81.082 0z" fill-rule="evenodd"/>

<path d="m323.14 950.41a79.994 79.994 0 0 0 -3.1361 21.951 79.994 79.994 0 0 0 80 80.002 79.994 79.994 0 0 0 80 -80.002 79.994 79.994 0 0 0 -3.0791 -21.951h-153.78z" color="#000000" color-rendering="auto" image-rendering="auto" shape-rendering="auto" solid-color="#000000" style="isolation:auto;mix-blend-mode:normal"/>

</g>

</svg>

I’ve use the code with FontAwesome plugin installed

<svg width="20" height="20" version="1.1" viewBox="0 0 800.00001 800.00001" xmlns="https://www.w3.org/2000/svg">

<g transform="translate(0 -252.36)" fill="#353535">

<path d="m359.46 341.17c-134.57 3.4551-183.04 131.52-190.11 200.44-27.31 347.03-80.955 359.79-146.05 363.31-17.863 0-17.609 29.706 0 29.706h753.4c17.609 0 17.863-29.706 0-29.706-65.096-3.5224-118.8-21.45-146.11-368.48-5.7731-65.039-55.477-191.82-190.05-195.27 0-119.38-79.898-116.36-81.082 0z" fill-rule="evenodd"/>

<path d="m323.14 950.41a79.994 79.994 0 0 0 -3.1361 21.951 79.994 79.994 0 0 0 80 80.002 79.994 79.994 0 0 0 80 -80.002 79.994 79.994 0 0 0 -3.0791 -21.951h-153.78z" color="#000000" color-rendering="auto" image-rendering="auto" shape-rendering="auto" solid-color="#000000" style="isolation:auto;mix-blend-mode:normal"/>

</g>

</svg>

But didn’t work
https://ibb.co/mbFxrSb

• This reply was modified 3 years ago by alexg9.

Can you send the url of the page you’re having trouble with, and a screenshot of the settings page of the notification bell plugin?

Sure :’)

Website link: Notification Bell Issue
Screenshot: https://ibb.co/hKh433j (all codes tested)

• This reply was modified 3 years ago by alexg9.
• This reply was modified 3 years ago by alexg9.
• This reply was modified 3 years ago by alexg9.

Hi,

Which display option are you using (add bell icon to menu, shortcode, floating bell…) ?
Also, can you test fas instead of the first fa in class:

<i class="fas fa-bars">

I’m using the shortcode

Copy-pasted the code but nothing happens, no icon appears

Hi,

In the website url that you sent, I don’t see any sign of the bell in the source code. Did you remove it from that page? Or maybe you’re using the shortcode for logged-in users?

I was using [wp-notification-bell] instead [wp-notification-bell-logged-out] that’s why you couldn’t see it. Also the plugin was installed and reinstalled and now the last code works (not the others) but the last one does!

<svg width="20" height="20" version="1.1" viewBox="0 0 800.00001 800.00001" xmlns="https://www.w3.org/2000/svg">

<g transform="translate(0 -252.36)" fill="#353535">

<path d="m359.46 341.17c-134.57 3.4551-183.04 131.52-190.11 200.44-27.31 347.03-80.955 359.79-146.05 363.31-17.863 0-17.609 29.706 0 29.706h753.4c17.609 0 17.863-29.706 0-29.706-65.096-3.5224-118.8-21.45-146.11-368.48-5.7731-65.039-55.477-191.82-190.05-195.27 0-119.38-79.898-116.36-81.082 0z" fill-rule="evenodd"/>

<path d="m323.14 950.41a79.994 79.994 0 0 0 -3.1361 21.951 79.994 79.994 0 0 0 80 80.002 79.994 79.994 0 0 0 80 -80.002 79.994 79.994 0 0 0 -3.0791 -21.951h-153.78z" color="#000000" color-rendering="auto" image-rendering="auto" shape-rendering="auto" solid-color="#000000" style="isolation:auto;mix-blend-mode:normal"/>

</g>

</svg>

So, on the basis of this, how is it possible to replace the bell with a custom image/icon?

• This reply was modified 3 years ago by alexg9.
• This reply was modified 3 years ago by alexg9.

What custom image do you want to use? Does it have the same problem as the font awesome icons?