SVG icons

I dont understand what is happening with the svg icons I have.
In media library they look as they should but on the website they look wrong. Also, if I change the position the icons changes. Why is this happening and how do I solve it?

Attachments:

You must be logged in to view attached files.

Hi Pernilla,

The problem caused by overriding classes of other SVG images.

Elements have same classes and put in the last then the priority of CSS declarations override earlier ones. I created demo page, then you can see the differences.

https://prnt.sc/HDxXrhSBhZJ6 https://prnt.sc/mABGzVAyCI_a

You should edit SVG and put colors directly into it or use different classes instead of using same classes for all SVG images.

Regards,

Thank you Hung!
The problem seems to appear only when using “information box”. Now I have deleted the icon from info box and added an svg image box. Then it works.
I suppose the info box has css that makes this have trouble.

Hi Pernilla,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,

[Author]

Posts