-
Hello there,
I have a couple of Icons as svg, that look perfect in the preview when adding them to the asset library but are completely messed up when using them on my site.
You can see that here:
https://postimg.cc/gallery/tyq2MLjI’ve already run the svgs through SVGOMG and since they appear perfectly fine in the asset library, I am confused as to why they are not displayed correctly on my site…
Thanks
Jonas -
Hi there,
Does the icon display correctly on the frontend of the page where you’ve added it?
-
No, same as in the backend editor
-
It seems like the SVG might be corrupted. Could you try adding the SVG directly from the source without optimizing it and see if that works?
-
I did that before, did not work. That’s why I tried the optimizing… Everywhere else it works fine! I can add it via the icon block plugin, works great. In the preview of the asset library, works fine…
-
Could you provide me with one of the icon codes for testing purposes?
-
Sure, here is the icons original svg code:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 16L10 10L16 8L14 14L8 16Z" stroke="#B1AEAA" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 12C3 13.1819 3.23279 14.3522 3.68508 15.4442C4.13738 16.5361 4.80031 17.5282 5.63604 18.364C6.47177 19.1997 7.46392 19.8626 8.55585 20.3149C9.64778 20.7672 10.8181 21 12 21C13.1819 21 14.3522 20.7672 15.4442 20.3149C16.5361 19.8626 17.5282 19.1997 18.364 18.364C19.1997 17.5282 19.8626 16.5361 20.3149 15.4442C20.7672 14.3522 21 13.1819 21 12C21 10.8181 20.7672 9.64778 20.3149 8.55585C19.8626 7.46392 19.1997 6.47177 18.364 5.63604C17.5282 4.80031 16.5361 4.13738 15.4442 3.68508C14.3522 3.23279 13.1819 3 12 3C10.8181 3 9.64778 3.23279 8.55585 3.68508C7.46392 4.13738 6.47177 4.80031 5.63604 5.63604C4.80031 6.47177 4.13738 7.46392 3.68508 8.55585C3.23279 9.64778 3 10.8181 3 12Z" stroke="#B1AEAA" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/> </svg>and here the optimized code:
<svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m8 16 2-6 6-2-2 6-6 2Z" stroke-width="1.75" stroke-linejoin="round" stroke-linecap="round" stroke="#B1AEAA"></path><path d="M3 12a9 9 0 1 0 18.001 0A9 9 0 0 0 3 12Z" stroke-width="1.75" stroke-linejoin="round" stroke-linecap="round" stroke="#B1AEAA"></path></svg> -
Hi there,
couple of issues:
1. the SVG needs the
viewBox="0 0 24 24"otherwise it will crop it badly. eg,<svg fill="none" height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8 16 2-6 6-2-2 6-6 2Z" stroke-width="1.75" stroke-linejoin="round" stroke-linecap="round" stroke="#B1AEAA"></path><path d="M3 12a9 9 0 1 0 18.001 0A9 9 0 0 0 3 12Z" stroke-width="1.75" stroke-linejoin="round" stroke-linecap="round" stroke="#B1AEAA"></path></svg>2. the GB Icons functions was built to rely on Fill icons and not strokes. So you need to set the Icon Color in the pallet to be a transparent color eg.
rgba(0,0,0,0)so the current color doesn’t fill in the icon. -
Okay I’ve copied your code, now how can I set the color of the icon to a transparent one? I have the icon set in a button.
-
If you select the Button Block, in the block settings colors you can set the Icon color.
NOTE: Your SVG code contains stroke colors, so to change them you would need to change the code. -
I only have the background color and text color, no option for the icon color
-
The button block does not have an icon color option, however, the headline block does.
The button icon will inherit the text color.
-
So what do I do? I was told to set the icon color to transparent, which is no option if it also affects the text.
-
Are these custom-made icons? If not, it would be better to find similar icons from Fontawesome, which will work directly in GenerateBlocks instead of trying to fix these.
- You must be logged in to reply to this topic.