search

twbs / icons

Official open source SVG icon library for Bootstrap.
https://icons.getbootstrap.com
MIT License
7.37k stars 1.06k forks source link

Vertical align looks better as text-top than as text-bottom #601

Closed johnaau closed 3 years ago

johnaau commented 3 years ago

I've noticed when using the Bootstrap Icon web font that the icons don't vertically align well with the surrounding text.

After changing vertical-align from text-bottom to text-top they align much better.

Some examples of icons placed alongside text and in buttons:

Capture

christianwgd commented 3 years ago

That seems to be a general issue. I saw this in a simple paragraph: <p style="font-size:2rem;">some text <i class="bi-calendar"></i> some other text</p>

unaligned

All icons have lower alignment as the text, independent from any vertical alignment for the paragraph.

christianwgd commented 3 years ago

After testing a lot, i have to admit, that the position seems technically correct. As soon as you add some characters with descenders, the icon is positioned correct in the middle. I noticed the problem after switching from FontAwesome to Bootstrap Icons and at some point FA seems to have a smarter solution for the icon positioning in text paragraphs. Text without descenders combined with a bootstrap icon looks really ugly, but at this point i have no idea how to improve that.

In the following sample the calendar icon is bootstrap and the clock icon is font awesome (there is no different css):

bs_vs_fa_icon
mdo commented 3 years ago

FontAwesome uses more specific vertical-align values, including custom vertical-align and sizing for large (and maybe small?) sized icons. I could see about adding something like this ourselves, too. If anyone wants to experiment with additional values, I'm down to help review and test PRs or even CodePen demos :).

mdo commented 3 years ago

That said, closing as duplicate of #82.