Hover on custom icon

[gehess]

Hi,
I need your help once again. I finally managed to use custom icons, but hover color isn´t working.
On global css I definded my icon as following:

.x-icon-custom{
background:url(https://customlink.png) top center no-repeat;
width:25px;
height:20px;}

In my topbar, where I want to use the icon, i put in the following:

 <a href="https://custom-link" title="custom"> <span class="x-icon-custom"></span> </a>

The icon appears, but with no hover effect. Adding the following css didn´t change anything:

.x-icon-custom:hover {
color:  #ff551d !important;}

I also tried adding the icon like standard x icons with the shortcode

[x_icon type="custom"]

For some reason, this doesn´t work. I can see my icon but with an x in the foreground (see attachment)

Im using X-theme with renew stack, everything is updated.
Thanks in advance!

[thai]

Hi There,

If you’re using the background image for the icon, the hover color will not work.

You have to replace the current background image with another image instead.

Please try with this code:

.x-icon-custom:hover {
     background-image:url(https://customlink1.png);
}

Hope it helps

[gehess]

Thanks for your reply. So is there an alternative approach to the “background-image” to set custom icons? Would be great to get those icons behave like to custom ones

[thai]

Hi There,

You can try with this solution instead:

CSS background-image color overlay | CSS-Tricks

Let us know how it goes!

[gehess]

Thanks @thai, but I your first solution seems to be easier and works just fine! Thanks again for your fast support!

[thai]

If you need anything else feel free to create another ticket.