Read more

Icon font vertical alignment in Windows

Dominik Schöler
July 14, 2016Software engineer at makandra GmbH

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 vertical-align of -18%, it looked good on Windows and iOS, but not Linux.

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

Further investigation showed that not only icons, but also normal capital letters aligned differently. No setting of vertical-align could fix this, neither top, bottom, middle, nor additional paddings or margins. It seems like browsers take the baseline from the font file, but calculate all other values (top, bottom, 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.

Posted by Dominik Schöler to makandra dev (2016-07-14 12:38)