FontAwesome icon (::before) is too big of 0.5px

Question

I have a biiiiig design issue. A 0.5px one to be exact. I use FontAwesome for my icons and I've noticed that the icons (which should be 14x14px when font-size is set to 14px), are 14x14.5px. It means that if I had some padding around my icon it won't be perfectly centered, and I should then set a padding of .5px to compensate. The problem seem to come from FontAwesome's ::before (the <i> tag is indeed 14x14px). Any idea on how to solve this?

With even padding, I get uneven dimensions:

With uneven padding, I get even dimensions:

I don't see any padding around the Icon. The dimension of the icon isn't a perfect square and so the width and height aren't the exact same. The center issue is just an optical effect. — iamrobin., Oct 15 '18 at 17:32
@iamrobin. please check the new image. The padding has to be uneven in order for the icon to be centered. — Maasha Theytaz, Oct 15 '18 at 17:42

score 0 · Answer 1 · answered Jan 02 '19 at 06:23

A have a similar issue when using http://fusetheme.com, it turns out the theme has a CSS styling for i. Instead of resetting i, I chose to use span which solves the problem for me.

Perhaps this will help other people with similar issue with their own themes.

FontAwesome icon (::before) is too big of 0.5px

1 Answers1