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: http://i.imgur.com/RwOKWLp.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?

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.