Issue while adding SVG ICON on Footer Infobox

It’s showing some glitches after adding the second SVG icons to an Infobox at the footer. The icons work perfectly if all 4 of them are same. Please find the attached images to better understand the issue.

Attachments:

You must be logged in to view attached files.

Hello,

You need to open your SVG icons file with some editor like Sublime Text or default system text editor and add width=”31″ height=”40″ attributes to your <svg> tag like it is shown:
http://prntscr.com/loos0p

Then you will need to re-upload your icons in WordPress Dashboard.

Best Regards

Sorry! It didn’t work. I tried adding height and width to the SVG as you mentioned. But still, have the same issue.

Attachments:

You must be logged in to view attached files.

Hello,

The problem is caused by SVG itself: some of your SVG images have the styles which are applied to the whole page. https://prnt.sc/loz1a3

In the result styles of one SVG icon influence the other. In order to solve this, you need to insert inline styles without classes, for example, https://prnt.sc/loz0mw

Best Regards

Thanks, the issue is resolved.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts