Filling problems (?) With custom icon font. Example below

Question

I created the icon font using custom .svg icons, and I had a problem with the add-on (or possibly another). The icons that I used to not include any add-ons in case of this issue.

For some reason, the icons seem to have moved above where they should be, and I cannot find a way to put them back in the container. Here is an example of what I'm talking about: http://i.imgur.com/RwOKWLp.png

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

Here is the HTML for a single icon:

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

Here is the CSS I'm working with now:

 [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; } 

Can anyone understand why this could happen?

Answer 1

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

This means that font metrics are incorrect. I don’t know if you changed them or it was an error from Icomoon, but now I was able to export the correct font.

In any case, you cannot (or at least shouldn't) fix this with CSS. The best way is to change the font.