Support » Plugin: WP Notification Bell » Replace bell icon

Replace bell icon

  • Resolved alexg9

    (@alexg9)


    1 year, 6 months ago

    Hi,

    Thank your for contributtion, this is a so useful plugin.

    I’m trying to change the bell notifications icon for a custom one via css calling

    #wnbell-icon-badge-container-id .wnbell-dropdown-toggle svg {

    But I didn’t got it.

    Could you shed some light on how to do it?

    Thank you,
    Álex

    • This topic was modified 1 year, 6 months ago by alexg9.
    • This topic was modified 1 year, 6 months ago by alexg9.
    • This topic was modified 1 year, 6 months ago by alexg9.
    • This topic was modified 1 year, 6 months ago by alexg9.
    • This topic was modified 1 year, 6 months ago by alexg9.
Viewing 15 replies - 1 through 15 (of 21 total)
1 2
  • Plugin Author wpdever

    (@wpdever)

    1 year, 6 months ago

    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.

    Thread Starter alexg9

    (@alexg9)

    1 year, 6 months ago

    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?

    Plugin Author wpdever

    (@wpdever)

    1 year, 6 months ago

    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 1 year, 6 months ago by wpdever.
    Thread Starter alexg9

    (@alexg9)

    1 year, 6 months ago

    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 1 year, 6 months ago by alexg9.
    Plugin Author wpdever

    (@wpdever)

    1 year, 6 months ago

    Hi,

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

    Thread Starter alexg9

    (@alexg9)

    1 year, 6 months ago

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

    • This reply was modified 1 year, 6 months ago by alexg9.
    Plugin Author wpdever

    (@wpdever)

    1 year, 6 months ago

    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="http://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>
    Thread Starter alexg9

    (@alexg9)

    1 year, 6 months ago

    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="http://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 1 year, 6 months ago by alexg9.
    Plugin Author wpdever

    (@wpdever)

    1 year, 6 months ago

    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?

    Thread Starter alexg9

    (@alexg9)

    1 year, 6 months ago

    Sure :’)

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

    • This reply was modified 1 year, 6 months ago by alexg9.
    • This reply was modified 1 year, 6 months ago by alexg9.
    • This reply was modified 1 year, 6 months ago by alexg9.
    Plugin Author wpdever

    (@wpdever)

    1 year, 6 months ago

    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">

    Thread Starter alexg9

    (@alexg9)

    1 year, 6 months ago

    I’m using the shortcode

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

    Plugin Author wpdever

    (@wpdever)

    1 year, 6 months ago

    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?

    Thread Starter alexg9

    (@alexg9)

    1 year, 6 months ago

    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="http://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 1 year, 6 months ago by alexg9.
    • This reply was modified 1 year, 6 months ago by alexg9.
    Plugin Author wpdever

    (@wpdever)

    1 year, 6 months ago

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

Viewing 15 replies - 1 through 15 (of 21 total)
1 2
  • The topic ‘Replace bell icon’ is closed to new replies.

Views