Info Box Icon Animation

Hi,

I have 02 questions.
1) How to animate Info Box svg icons on hover? According to the below demo color will change from orange to white?
https://woodmart.xtemos.com/demo-tools/demo/tools/
2) How to add icon to the top bar (add phone icon similar to email) and make it bold? Also add href mailto/tel to the text and icon?

Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached and visited the link you provided.

1) The effect on the SVG icons on hover is achieved by SVG that uses the “fill” property to set their color.

2) And you can add content to the topbar by editing the header from Woodmart >> Header Builder.

Screenshot for Clarification: https://prnt.sc/wfsr1r

Best Regards.

Thanks.

But, can you explain further on 01st question? How can I achieve this using fill property?

Hello,

Most Welcome.

I have visited your website and it seems that you have already achieved the white color on hover for the SVG icons in the infobox.

Screenshot for Clarification: https://prnt.sc/wgpcbl

Best Regards.

Pls check now. This is the actual svg icon I want to use.

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached and visited your website.

As I mentioned in my previous reply this works with only the SVG icons that support the fill property as the other icons you added do.

The icon you mentioned doesn’t support the property that’s why the effect is not working.

Regards.
Xtemos Studios.

[Author]

Posts