Padding issues (?) with custom icon font. Example below

Question

I have created an icon font using custom .svg icons and I am having a problem with the padding (or possibly something else). The icons I used to not include any padding, in case that question comes up.

For some reason, the icons seem to have shifted above where they should be and I can't find any way to get them back down into the container. Here is an example of what I am talking about: https://i.sstatic.net/Ptok9.png

I have set the "background-color" to yellow to highlight my problem.

Here is the HTML for one icon:

<div class="vicon" aria-hidden="true" data-icon="&#xe001;"></div>

Here is the CSS that I am currently working with:

[data-icon]:before {
    font-family: 'iconfont';
    content: attr(data-icon);
    speak: none;
    font-size: 100%;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.vicon {
    display: inline-block;
    font-size: 50px;
    margin-top: 1em;
    background-color: yellow;
}

@font-face code:

@font-face {
font-family: 'iconfont';
src:url('[font_location_on_company_server].eot');
src:url('[font_location_on_company_server].eot?#iefix') format('embedded-opentype'),
    url('[font_location_on_company_server].woff') format('woff'),
    url('[font_location_on_company_server].ttf') format('truetype'),
    url('[font_location_on_company_server].svg#icon_font') format('svg');
font-weight: normal;
font-style: normal;
}

Does anyone have any idea why this might be happening?

Unaffected

Are you using Icomoon? If so, have you tried clicking the Edit button and then clicking one of the icons? You should make sure the icon is properly aligned with the grid. – Squier

I am, I used it to import all the SVGs and create the icon font. I check just there and unfortunately thats not the problem, everything is aligned to the grid. Thanks for the suggestion. – Unaffected

Must be something about the font itself. Tried experiments with "typicon", looks good: jsfiddle.net/naivists/WE5ej – Tetracaine

I was afraid that was the problem, nuts. Thanks for taking the time to explain. I didnt do anything unusual while importing the icons into Icomoon, but there must be something I missed while exporting it as a font. At least the code is ok(ish). Long shot...but theres nothing I can do to fix this with CSS? – Unaffected

cable_ready: if you put your SVG font up on the web someplace publicly-accessible and create a jsFiddle which shows the problem, I will help you come up with a CSS workaround. – Publican

Tony Alford: I managed to get the font to work in JSFiddle. The icons are showing up fine in the preview without any of the problems I am seeing when I preview my code from Dreamweaver in the browser. You can check out the code here. I will try get all the HTML & CSS up and I will post the link in the question above. – Unaffected

Answer 1

The problem is not CSS but your font's baseline height (see http://icomoon.io/#docs/font-metrics)

It means the font metrics are wrong. I don't know if you have them changed or if it was a bug from Icomoon but I've been able to export a correct font right now.

Anyway you cannot (or at least you shouldn't) "correct" this with CSS. The best way is to change the font.

Skittle

I think you're right on the money here. It does seem to be a problem with the baseline height. However, it was nothing to do with Iconmoon. I carelessly forgot to use the essential "Object > Artboards > Fit to Artwork Bounds" in Illustrator. Thank you very much for your help. Problem solved. – Unaffected