Icon Font – Font size / Line height alignment issue

[AwfulMedia]

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

[Paulie_D]

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

[AwfulMedia]

@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.

[Paulie_D]

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

[AwfulMedia]

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.

[AwfulMedia]

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.

[Paulie_D]

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

[yeasirakash]

Hi, I am facing the same problem. Can you share the icon making process or how did you save the icon as svg?

[Author]

Posts