使用btn-small bootstrap類時Chrome中斷了Font Awesome圖標

以前有沒有其他人遇到過這種情況？我創建了一個非常簡單的例子上的jsfiddle重現：http://jsfiddle.net/3UHSc/2/使用btn-small bootstrap類時Chrome中斷了Font Awesome圖標

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

的按鈕看起來在Firefox和IE罰款，但在Chrome圖標的頂部像素被切斷。我能夠通過添加樣式規則，使圖標字體較小，以解決它：

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

，但我不知道是否有一個更好/更清潔的方式來得到這個工作。

來源

2013-10-03 dan barrett

已經很長一段時間了，但我剛剛有同樣的問題。似乎是一個[常見問題]（https://github.com/FortAwesome/Font-Awesome/issues/353） – yuvi

我也是。它的一些圖標並不明顯，但其他的，如'icon-print'以'.btn-small'（11.9px）截斷。 – Voodoo

我發現該圖標在11.5px和11.99px之間的字體大小被截斷。在11.49px px這很好。不確定這是否是一個棘手的問題或有點。 – Ravimallya

SVG圖標字體在Chrome中存在渲染問題。嘗試使用源代碼中的SVG文件交換woff文件。我寫了一篇關於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;

}

來源

2014-09-10 23:31:57

可以覆蓋CSS和添加非中斷空格（\00a0）並用CSS調整多餘的左側空間。例如：

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

來源

2016-12-08 01:48:35 biko

使用btn-small bootstrap類時Chrome中斷了Font Awesome圖標

回答

相關問題