Aligning icons (fontawesome)
I want to align the icon to the text, but it seems difficult. I tried
vertical-align: middle, but the position of the icon is not very middle. I suppose it's due to the height of CJK characters?
6 Replies
try setting the font-size to 1lh
and if that doesn't work, just do 1 span with 2 spans: the text and icon
then, on that span, use grid-inline or flex-inline and center with that
it's hacky, but achieves perfect center alignment
however, the 1lh should be tried first
font-size: 1lh just makes icon big
flex works
it's very irritating to center text vertically, so, i just use flex-inline or grid-inline when i must
but it's good that it worked for you
just as a follow up FYI, There's a spec-ed property set to help us deal with this problem: https://github.com/jantimon/text-box-trim-examples?tab=readme-ov-file
Currently in Safari and close to ready in Chrome. Maybe will make Interop this year 🤞
that does sound interesting