3

有没有其他人遇到过这个？我在 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;
}

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

4

2 回答 2

1

SVG 图标字体在 Chrome 中存在渲染问题。尝试将 woff 文件与源中的 SVG 文件交换。我也写了一篇关于在 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-10T23:31:57.490 回答
-1

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

.fa-check-square-o:before {
    content: "\00a0\f046";
}
于 2016-12-08T01:48:35.023 回答