April 8, 2013 at 7:56 am #43958
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,
AustinApril 8, 2013 at 8:13 am #131005
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 #131009
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 #131013
It’s a hack because I’m sure there is something fundamental I’m not getting but :http://codepen.io/Paulie-D/pen/vynAiApril 8, 2013 at 8:44 am #131015
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 #131014
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 #131019
Phew! At least I’m not going completely insane then. ;-)December 9, 2019 at 11:11 am #300071yeasirakashParticipant
Hi, I am facing the same problem. Can you share the icon making process or how did you save the icon as svg?
- The forum ‘CSS’ is closed to new topics and replies.