Icon font vertical alignment in Windows
I had an issue with icons from an icon font aligning differently on Linux, iOS and Windows (seemingly browser-independent). With
vertical-align:middle, they aligned properly on Linux, iOS and macOS, whereas with a
-18%, it looked good on Windows and iOS, but not Linux.
Further investigation showed that not only icons, but also normal capital letters aligned differently. No setting of
vertical-align could fix this, neither
middle, nor additional paddings or margins. It seems like browsers take the
baseline from the font file, but calculate all other values (
middle, percentages, pixels, …) themselves.
Hence, the solution is to keep
vertical-align untouched (
baseline by default) and then adjust alignment with paddings, margins and the like. You should also set
display:inline-block, if possible.