Why does font-icon render outside of its content area? and how to fix it?

Question

I have a .woff font file consisting of font-icons. These icons are rendered differently in Mac and in Windows. I suspect the reason to be different Win Ascent/Descent and HHead Ascent/Descent values in font metrics.

This icon-font file is generated from svg files using webfonts-generator package

Here is the snapshot of same icon rendered in both mac and windows

Mac:

Windows:

could anyone tell me how to fix this?

Answer 1

may be your line-height is less than font-size