NO BUG: Icon Sets Spacing

Bricks Version: 1.5.7
Browser: Chrome 90
OS: macOS / Windows / Linux / etc.
URL: (a link to a page that illustrates the issue would be really helpful)

[Please describe in as much detail as possible how we can replicate this bug]

Hi guyy

When mixing certain built in icon sets, the heights and sizes of each by default take up difference spaces. So say a 60px sized font for two different icon library’s take up different heights. Super annoying if you need to use an icon from a different set in a row.

Workaround is adding a manual height to the font awesome one in this video, to make them take up the same space - but both are set to 60px in font size.

http://recordit.co/SWhVYF6blN

Cheers

Hi Rob,
Thank you very much for your report, but there is nothing we can do about it.

Some of the icons have different ratios. The dollar note, for example, is more of a landscape format, the swimming hoop a square. If you’re mixing icons, you can easily add a class to each icon that applies either a line-height or a min-height.

I’m not sure about other settings that might influence your icons, but this is how it looks by default. Each icon has the default font size of 60px. I’ve added a yellow background color to the icons and mint-green to the surrounding container. The icons seem quite balanced, even if they differ minimally due to their proportions.

Best regards,
timmse

Hi Stefan

Thanks for detailed reply. It’s between the sets I was meaning, not for the individual icons within the same suite - I appreciate that would be insane.

The containers between say Font Awesome and the others is a clear 30px height change which severely knocks them out of alignment until I add a class to fix it. That’s fine for now, until a client wants to chose them and doesn’t know how to add classes.

The icons in my previous screenshot are not all from one set :wink: As I said, it depends a lot on the icons you use. New example, from left to right: Ionicons - FA Regular - FA Solid - Themify.