Font-Awesome 图标无法在 Android 版 Chrome 上正确显示答案

【问题标题】：Font-Awesome icons do not display correctly on Chrome for AndroidFont-Awesome 图标无法在 Android 版 Chrome 上正确显示
【发布时间】：2013-01-28 13:07:11
【问题描述】：

我的 Font-Awesome 图标无法在 Android 版 Chrome 中的以下页面上正确呈现：

http://nylen.tv/public/chrome-issue.html

每个td.description 元素（ZZZZZ 行）的末尾都有一个或两个 Font-Awesome 图标。在我的 Galaxy Nexus 上，如果页面以纵向模式加载，这些不会显示。如果页面以横向模式加载，它们会显示，但如果手机随后翻转到纵向模式，它们就会消失。我的 Nexus 7 上也出现了类似问题。

我认为我的标记没有问题。它适用于我尝试过的所有其他浏览器，并且 HTML 和 CSS 验证除了 Font-Awesome 的供应商前缀 CSS 属性。

有人见过这样的吗？有什么解决方法吗？

【问题讨论】：

标签： css google-chrome font-awesome

【解决方案1】：

此问题已在 Chrome for Android 更新中得到解决。

【讨论】：

【解决方案2】：

我在 Chrome 中遇到了类似的问题……在我的桌面上。代替图标的是一个垂直的矩形。

在其他地方，在您网站自己的样式表中，建议您可以将高度和宽度设置为 1em，并将显示设置为 :block，就像这样...

i {
  width: 1em;
  height: 1em;
  display:block;
  cursor: pointer;
}

但我发现问题是我没有在 font-awesome.min.css 中正确设置相对字体路径...执行此操作的说明如下：

[http://fortawesome.github.com/Font-Awesome/#integration][1]

还要确保每个 URL 前面都带有“src”标签...

@font-face{
  font-family:'FontAwesome';
  src:url('../font/fontawesome-webfont.eot?v=3.0.1');
  src:url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype');
  src:url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff');
  src:url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal }

【讨论】：

感谢您的建议 - 不幸的是，他们都没有帮助。这绝对看起来像是 Android 版 Chrome 特有的渲染错误。