图标字体在 Opera Mobile 中不起作用答案

【问题标题】：Icon fonts are not working in Opera Mobile图标字体在 Opera Mobile 中不起作用
【发布时间】：2013-03-16 07:30:53
【问题描述】：

我开始使用 FontAwesome 集合并在不同的操作系统/浏览器上对其进行测试。
我发现它适用于 IE > 7、Firefox、Chrome、Safari（iPhone、iPad）、Opera Desktop，真的很棒！

只有 Opera Mini 不支持 @font-face，但 Opera Mobile (v 12.19) 支持。
但它只适用于带有字母的普通字体。
像FontAwesome 或icnfnt 这样的标志性字体不起作用！

我认为原因是，因为图标不使用正常的字母字符。图标字符以十六进制格式描述（ISO CSS 内容：i:before {content: "\f000"}）。我尝试在 HTML 代码中以数字格式描述图标（从十六进制转换为十进制：<i>&#61440;</i>）但这也不起作用。

那么有没有办法在 Opera Mobile 上显示标志性字体？

相关链接：HTML Glyphs

【问题讨论】：

opera 的 presto 引擎应该支持图标字体，如果你能提供一个关于如何实现它们的 jsfiddle，也许我可以建议一个更兼容的方式。
编辑：本网站上展示的示例和实现：fortawesome.github.com/Font-Awesome/#integration
我没有Opera Mobile，您可以查看icomoon.io 以获得一些好的图标字体并尝试其他资源...此外，您可能没有为Opera 提供正确的图标字体文件使用时，您可能需要尝试 EOT、TTF、SVG 文件，看看它是否呈现其中任何一个。
@timaschew - 如果你在 Opera Mini 上查看字体很棒的主页，它是否正确显示字体？
@IlanBiala 相信我，错误的字体文件没有问题。它适用于普通的字母字体。我发现 icomoon.io 上的图标工作正常！所以它似乎与字体文件有关。 @BillyMoat Opera Mini 在任何情况下都不起作用，因为不支持 @font-face!我的问题只是关于 Opera Mobile，而不是 Opera Mini。

标签： css icons font-face webfonts

【解决方案1】：

我在使用 Opera Mobile/Opera Mini 时遇到了同样的问题。对我有用的是从 Font Awesome 切换到 Elusive Icons。它们也是“为 Bootstrap 构建的”并且具有基本相同的图标可用，当我切换时我什至不必更改任何图标类名称，只需要更改字体文件和 less/css 文件。

【讨论】：

【解决方案2】：

我发现它适用于 IE > 7...

Font-Awesome 带有一个不使用@font-face 的IE7 样式表。您是否尝试过添加它以查看它是否也解决了 Opera Mobile 问题？

font-awesome-ie7.min.css

【讨论】：

我已经尝试过你所说的......这真的很糟糕......我在 Android 4.2.1 (Nexus 4) 你的操作系统版本/设备是什么？
天哪，对不起，我才意识到我检查的是默认浏览器而不是 Opera！在 Opera 中尝试过，不，它不起作用。我想当浏览器识别为 Opera Mobile 时，修复仍然是包含 IE7 样式表（我认为您可以使用 Modernizr 来检测）。
我每次都强制加载 IE7 css。我很确定，Opera Mobile 问题与 IE7 hack 无关
我认为最好的办法是在 Font Awesome 的 githup 页面 github.com/FortAwesome/Font-Awesome/issues 和 Opera 上提出这个问题。 opera.com/support/bugs 不知道如何在 Opera Mobile 上调试网站，所以帮不上什么忙！
@JamesDonnelly 您可以使用 adobe edge 检查并使用 adobe 提供的 chrome 开发工具插件进行检查，并像使用常规网站一样使用 chrome 工具进行检查。希望这会有所帮助。 :)