Consistent icon font spacing throughout browsers/os

[croydon86]

Hi all

I am having a lot of trouble vertically aligning an entypo icon font.

Here is the codepen which currently displays as intended on Safari and Chrome on mac – http://codepen.io/anon/pen/jJtwz

As you can see the right arrow is vertically centred. Now the problem browsers…

Mac Firefox – The arrow is slightly lower but can tolerate this

It appears too low on the following browsers… (Every PC browser)

Mac Opera
PC Chrome
PC Firefox
PC IE 10
PC IE 9

All the PC browsers seem to be resolved by adding a line-height:5px and getting rid of the top value.

Has anyone experienced the line height inconsistencies between browsers with icon fonts and know of a fix? It seems the OS has something to do with this as opposed to just browser inconsistencies.

I have tried all sorts of tricks like negative margins, absolute/relative positioning but cannot get consistent results.

Thanks

P.S. This was tested on all latest versions of browsers on the latest Mac OS and Windows 8

[chrisburton]

What about setting a height and using line-height to vertically center?

[croydon86]

Thanks but it’s the line height thats the problem. For example a line height of 0px would work in the PC Chrome, but mac chrome needs a line-height of 20px to be vertically centered.

I came across this link https://github.com/danielbruce/entypo/issues/8 – It seems to be an entypo issue, I may try it with fontello to see if there is any difference.

[croydon86]

Yes! I’ve tried fontello and it works. http://codepen.io/anon/pen/sidje

[chrisburton]

That’s not vertically centered for me in Chrome (W7)

[croydon86]

Sorry correct link http://codepen.io/anon/pen/znjBq

[chrisburton]

That works.

[Author]

Posts