Font-awesome: Icons stack not perfectly centered using webfont

[radubr]

I've tried to stack a black circle inside a white square. But the circle is not centered as you can see in this link.
https://codepen.io/radubraniscan/pen/pdNwZP

fa-circle on fa-square-o

<div class="container">
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-circle fa-stack-1x"></i>
</span>
</div>

[PeterShaggyNoble]

The problem isn't with the stack, it's with fa-square-o - see #4649.

[tagliala]

Hi!

Thanks for reporting this

4649 has been fixed in FA5

Here it is a screenshot of your example in FA5 rc4

It is much better, but it is still not perfectly centered (2pixel offset on the bottom).

So I've stacked individual SVGs in a vectorial tool, and they are properly centered:

I think we cannot do much more than this and this is a side effect of webfonts. If you need pixel perfect stacking, please consider another solution.

I will label this as "cantfix"

[tagliala]

PS: Please remember to set the font size to 14px (or multiples) when you are using Font Awesome 4

Stacking at 16px (offset on the bottom is more visible)

Stacking at 14px

[tagliala]

The problem with FA5 is also in the fa-lg class, which adds a 1.333em multiplicator.

This is an example of

<span class="fa-stack">
  <i class="far fa-square fa-stack-2x"></i>
  <i class="fa fa-circle fa-stack-1x"></i>
</span>

I should recommend the use of multiples of 14px (FA4) or 16px (FA5) for icon stacking