Проблемы с заполнением (?) С пользовательским шрифтом значка. Пример ниже

Question

Я создал шрифт значка, используя пользовательские значки .svg, и у меня возникла проблема с дополнением (или, возможно, другим). Значки, которые я использовал, чтобы не включать никаких дополнений, в случае возникновения этого вопроса.

По какой-то причине значки, похоже, переместились выше, где они должны быть, и я не могу найти способ вернуть их обратно в контейнер. Вот пример того, о чем я говорю: http://i.imgur.com/RwOKWLp.png

Я установил «background-color» на желтый, чтобы выделить мою проблему.

Вот HTML для одной иконки:

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

Вот CSS, что я работаю с:

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

Кто-нибудь знает, почему это может произойти?

Answer 1

Проблема не CSS, но базовый шрифт по высоте (см http://icomoon.io/#docs/font-metrics)

Это означает, что метрики шрифта неверны. Я не знаю, изменились ли они, или это была ошибка от Icomoon, но сейчас я могу экспортировать правильный шрифт.

В любом случае вы не можете (или, по крайней мере, не должны) «исправить» это с помощью CSS. Лучший способ - изменить шрифт.