Where do I define the second SVG?

Hi;

https://woodmart.xtemos.com/blog/woodmart_element/info-boxes-with-hover/

When you mouseover the background changes, but also the svg color. If I insert this temple it works, but I would like to change the svg but where can I define the second svg in an other color?

Hi,

It changes the color of SVG icon to white automatically if you have selected light color scheme on hover. Note that your SVG image should be colored with fill attribute to make it work https://gyazo.com/7d881c288bcbf9949b607162f140903f

Regards

I am also trying to achieve the same result. How can I edit the .svg code to add in the fill attribute please?

Sorry, but we don’t have tutorials about creating SVG graphics. It should be done by a designer. We usually take already well-designed icons from this resource https://flaticon.com/

I am a designer and have designed my own icons, I also found the code for the .svg icon but couldn’t see how to get it to change colour when hovered over. You have used this technique in a few places across your demos using the info boxes but for alot of people achieving what you show isn’t all that easy.

I have added my .svg icon into the info box section but cannot for the life of me figure out how you were able to add in the custom code and give the .svg an id which you are then targeting and giving a fill upon hover.

Try to find some simple icon on the resource we sent you and check how it is designed and coded. It should have fill attribute since it is the only one way to animate the color with CSS.

[Author]

Posts