Treehouse: Grow your CSS skills. Land your dream job.

Consistent icon font spacing throughout browsers/os

  • # April 27, 2013 at 4:27 pm

    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 –

    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.


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

    # April 27, 2013 at 4:43 pm

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

    # April 27, 2013 at 4:52 pm

    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 – It seems to be an entypo issue, I may try it with fontello to see if there is any difference.

    # April 27, 2013 at 4:58 pm

    Yes! I’ve tried fontello and it works.

    # April 27, 2013 at 5:11 pm

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

    # April 27, 2013 at 5:21 pm

    Sorry correct link

    # April 27, 2013 at 5:24 pm

    That works.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.