使用 btn-small 引导类时，Chrome 中的 Font Awesome 图标被截断答案

【问题标题】：Font Awesome icon cut off in Chrome when using the btn-small bootstrap class使用 btn-small 引导类时，Chrome 中的 Font Awesome 图标被截断
【发布时间】：2013-10-10 15:19:53
【问题描述】：

以前有没有其他人遇到过这种情况？我在 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;
}

但我想知道是否有更好/更清洁的方法来让它工作。

【问题讨论】：

已经很久了，但我也遇到了同样的问题。好像是common issue
我也是。一些图标并不明显，但其他图标，如 icon-print 在 .btn-small 中被截断（11.9px）。
我发现图标在 11.5px 和 11.99px 之间的字体大小被截断。在 11.49px 像素中很好。不确定是字距调整问题还是其他问题。

标签： css twitter-bootstrap google-chrome font-size font-awesome

【解决方案1】：

您可以覆盖 CSS 并添加不间断空格 (\00a0) 并使用 CSS 调整额外的左侧空间。示例：

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

【讨论】：

【解决方案2】：

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;

}

【讨论】：