Шрифт Удивительный значок, отрезанный в Chrome при использовании класса btn-small bootstrap

Question

С кем-нибудь еще сталкивался с этим раньше? Я создал очень простой пример на jsfiddle воспроизвести: http://jsfiddle.net/3UHSc/2/

<a class="btn btn-small"> 
    <i class="icon-edit"></i> Edit 
</a> 

Кнопка выглядит отлично в Firefox и IE, но в Chrome верхний пиксель значок отрезан. Я могу работать вокруг него, добавив правило стиля, чтобы сделать меньше значок шрифта:

.btn-small > i 
{ 
    font-size: 11px; 
} 

Но мне интересно, если есть лучший/уборщик способ получить эту работу.

Answer 1

Шрифты SVG имеют проблемы с отображением в Chrome. Попробуйте поменять файл woff с SVG-файлом в вашем источнике. Я написал сообщение в блоге о preventing icon font cutoff in Chrome тоже, что вы можете проверить.

т.е. изменить:

@font-face { 
font-family: 'icomoon'; 
src:url('fonts/icomoon.eot'); 
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), 
    url('fonts/icomoon.woff') format('woff'), 
    url('fonts/icomoon.svg#icomoon') format('svg'), 
    url('fonts/icomoon.ttf') format('truetype'); 
font-weight: normal; 
font-style: normal; 

}

к этому:

@font-face { 
font-family: 'icomoon'; 
src:url('fonts/icomoon.eot'); 
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), 
    /* 
     The SVG font has rendering problems in Chrome on Windows. 
     To fix this, I have moved the SVG font above the woff font 
     so that the woff file gets downloaded. 
    */ 
    url('fonts/icomoon.svg#icomoon') format('svg'), 
    url('fonts/icomoon.woff') format('woff'), 
    url('fonts/icomoon.ttf') format('truetype'); 
font-weight: normal; 
font-style: normal; 

}

Answer 2

Вы можете перезаписать CSS и добавить неразрывный пробел (\00a0) и отрегулируйте дополнительное левое пространство с помощью CSS. Пример:

.fa-check-square-o:before { 
    content: "\00a0\f046"; 
}