I cannot figure out something that is <i>so</i> simple. I can’t get FontAwesome SVGs to contain themselves to the height/width of the div while using .icon-1x1-medium or any other sizes. I find it consistently expands to fill the width, and the height will happily exceed the square dimensions of the div. My objective is to get a uniform height across the four SVG icons being displayed in each of the four columns. Any thoughts? It’s the four-column section right below the homepage hero. Thank you! https://preview.webflow.com/preview/honor-hvac?utm_medium=preview_link&utm_source=desi[…]c&preview=56337ac7787e0805c55d2a585853b4f1&workflow=preview
I think adding width="100%" and height="100%" to the actual embed code might be an important piece. I would look at what we inject into the icons used on the Relume Icons library as a template for how to replicate with FontAwesome.
You can also apply classes to the SVG that maybe will help with this if FontAwesome has some utilities to plug into.
But it appears just simply adding width and height here seems to do the trick for me at least.
Visually, Mission-Focused is taking up more room and has no gap versus the others have large gaps and thats more of a result of the card flexbox layout than the icons which you are likely already aware of. Hope that helps!
<svg xmlns="<a target="_blank" rel="noopener noreferrer" href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>" xmlns:xlink="<a target="_blank" rel="noopener noreferrer" href="http://www.w3.org/1999/xlink">http://www.w3.org/1999/xlink</a>" aria-hidden="true" role="img" class="iconify iconify--ic" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 15.5h-1.5V14h-1v3H8v-3H7v4.5H5.5v-5c0-.55.45-1 1-1H11c.55 0 1 .45 1 1v5zm3.5 0H14v-6h3.5c.55 0 1 .45 1 1V16c0 .55-.45 1-1 1h-2v1.5zM11 5.5v6H9.5V7H8V5.5h3zm5 0v6h-1.5V7H13V5.5h3zm-.5 8.5H17v1.5h-1.5z"></path></svg>
Thanks, ! Dude, I was using an image class name (.icon-1x1-medium) on an SVG. As soon as I used .icon-embed-medium, the SVG started containing itself to the div. Little things, sometimes.
