NO BUG: The problem of displaying an icon with a link

Bugs
1

Browser: Chrome 129.0.6668.90
OS: Windows

Hi bricks team,

I placed an icon inside the div and set a background color for the div. The problem is that if the icon has a link, its behavior changes and actually increases the height of the div.

If the icon is SVG, everything looks good in the builder, but there is a problem in the frontend.

in builder :

builder
builder1919×636 42.3 KB

in frontend :

frontend
frontend729×220 916 Bytes

no link :

no link
no link1919×592 36.8 KB

2

On the frontend, it is not a bug. It has something to do with the default display inline and vertical align for images/svg.

The easiest solution is to apply a display flex to the icon element.

1 Like
3

Hi Hosein,
Thanks for your report!

I agree with David. Set the icon to display: block or flex, and it’ll behave as expected.
Pure HTML: https://codepen.io/timmse/pen/PoMzgZE

Best,
timmse

1 Like