icons icon indicating copy to clipboard operation
icons copied to clipboard
verified publisher icon twbs

Icon vertical alignment in button

Open andreiduca opened this issue 4 years ago • 2 comments

Icons inside buttons appear slightly off, as seen on the documentation page https://icons.getbootstrap.com/#accessibility

Screen Shot 2021-06-13 at 11 16 24 AM

It seems that, even though the icon is 32px in height, the button allocates 36px for the content.

Screen Shot 2021-06-13 at 11 16 13 AM Screen Shot 2021-06-13 at 11 16 41 AM

It seems that removing the vertical alignment of the icon would fix the issue:

Screen Shot 2021-06-13 at 11 23 03 AM

but I suspect that this will mess up vertical alignment with any text that renders next to the icon.

Another fix would be to change the display of the button from inline-block to inline-flex, and have the content center-aligned vertically:

Screen Shot 2021-06-13 at 11 26 06 AM

OS: macOS Browser: Chrome, Safari

andreiduca avatar Jun 13 '21 18:06 andreiduca

Any news here, as this bug is still present in bootstrap5?

While you could fix it by using Bootstrap5 flex and adding buttons d-flex justify-content-center align-items-center gap-1 CSS classes, I think this is not the suggested/proper solution or only bad workaround?

rugk avatar Feb 26 '25 00:02 rugk

MAybe this is the wrong repo though? It#s more about bootstrap itself than the icons? If so, can it maybe be moved?

rugk avatar Feb 26 '25 01:02 rugk