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)
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.
P.S. This was tested on all latest versions of browsers on the latest Mac OS and Windows 8
What about setting a height and using line-height to vertically center?
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.
Yes! I’ve tried fontello and it works. http://codepen.io/anon/pen/sidje
That’s not vertically centered for me in Chrome (W7)
Sorry correct link http://codepen.io/anon/pen/znjBq
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".