Grow your CSS skills. Land your dream job.

Icon Font – Font size / Line height alignment issue

  • # April 8, 2013 at 7:56 am

    I think I’m just crazy.

    A short example can be viewed here: [Codepen](http://codepen.io/AwfulMedia/pen/epFnl “View the Pen for my issue”)

    I’m simply wanting to align the icon to the center of the height vertically. This should be obvious, but I’m completely drawing a blank.

    Is this a CSS issue or am I rendering my icons incorrectly? The way they are rendering it doesn’t allow me to place icons inline without having to position them with CSS and that’s not ideal.

    I’m hoping for someone to just simply call me crazy because I completely missed something.

    Thanks in advance,
    Austin

    # April 8, 2013 at 8:13 am

    Without seeing the font itself I would have to assume that the extra space is inherent in the font.

    # April 8, 2013 at 8:18 am

    @Paulie_D

    The fonts were created using [IcoMoon](http://www.icomoon.io “IcoMoon”). The SVG they were created from have no extra space around them and they appear to display correctly in the IcoMoon dashboard.

    It is very odd because a couple of days ago I created a font and everything was working correctly. I created one just today and I can’t get the alignment to work correctly.

    IcoMoon’s documentation attempts to explain the metrics and it seems it should be centered by default, but I’m not sure.
    [IcoMoon Documentation](http://icomoon.io/#docs/font-metrics “IcoMoon Documentation”)

    Thanks for your input.

    # April 8, 2013 at 8:32 am

    It’s a hack because I’m sure there is something fundamental I’m not getting but :http://codepen.io/Paulie-D/pen/vynAi

    # April 8, 2013 at 8:44 am

    If I do not manage to find the proper way I’ll fall back to that approach. I’ll look into the font a bit more and see if the issue starts in the font files themselves.

    Thanks for your assistance Paulie_D. I’ll update when I make some progress.

    # April 8, 2013 at 9:05 am

    Well, I have some news that I think would be considered good. It is an issue with the actual font. I tested using default fonts from IcoMoon and the result is what you would expect.

    [Here’s the new example](http://codepen.io/AwfulMedia/pen/ulkji “Second Attempt”)

    I guess the issue is with something happening from the conversion of the SVG file. I’m not completely sure what more I could do with that process, though.

    # April 8, 2013 at 9:12 am

    Phew! At least I’m not going completely insane then. ;-)

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".