I have a cart Icon code embed in several places. They get moved down about 100% of their own height on anything smaller than tablet size. This bug does not occur on buttons i have placed them in, but only if they are placed before text links. This is visible in the designer and in the published site.
As you can see the selection box is at the correct position, but the contents get moved down for some reason. I tried to use different kinds of svg code (compound paths and non-compound paths), the problem persists.
I will move the icons on mobile breakpoints as a quick fix for now but this bug should be addressed.
1- set your o-cart-icon class to display flex. That’s seems to fix the alignement problem.
2- instead of using a custom code svg you could go on a site like https://icomoon.io/ that will make you able to create a font based on a set of svg you provide. This way you can upload the font in your project settings and use it throughout your project. This is usually how I do it and it gives you easy control on your svg as it will use the typography css properties directly within webflow.
I hope one of these two will make it for you. I’m style looking for a way to make it works within the custom code but couldn’t figure it out yet.
Ah, I fixed it right before you wrote ;). FYI setting it to Flex fixed it on smaller screens but broke it on larger ones again. So I just added a combo class for that