Inconsistent css rendering between PC and Mac

Question

I made my own icon font and looks perfect in any browser from OS X:

But is shown with a vertical offset in any browser from MS Windows PC:

In this last example (from PC) the glyph appears below its element box (out of its natural box).

Is a span element:

<span class="sin-avatar circle s s-pluma-6"></span>

with a ::before pseudo element:

.s-pluma-6::before {
    content: "\EA2F";
}
.s::before {
    display: inline-block;
    font-family: iconfont;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

There is a live example here (scroll to down): https://stage.soux-calvo.online/

I'm going crazy, modifying CSS in many ways with no success.

Any suggestion will be appreciated. Thank you.

Answer 1

I found the bug. It was in the font build process (with gulp sketch). Some icons, I don't know why, was spoiling the font. Removing that icons, bug fixes.