CSS Font Awesome 图标在某些浏览器中不起作用

Font Awesome Icons are not working in some browsers

提问by Gonzalo

I'm using Bootstrap + Font Awesome, and all is ok with most desktop and mobile browsers, but Font awesome icons are not working with some browser like opera Mobile, Opera Mini, and some version of Android Browser. Only displays a blank rectangle.

我正在使用 Bootstrap + Font Awesome，大多数桌面和移动浏览器都可以，但是 Font Awesome 图标不适用于某些浏览器，例如 Opera Mobile、Opera Mini 和某些版本的 Android 浏览器。只显示一个空白矩形。

Does anyone know that problem? and , Is there a solution ?

有谁知道这个问题吗？并且，有解决办法吗？

Thanks

谢谢

[EDIT 2013-03-06 !Important]I couldn't find any apparent problem, so I tried with unheard solutions. I tried with two online font conversion tools. First I used http://www.freefontconverter.com/to convert the original FontAwesome svg to ttf. Then I used http://www.font2web.com/to convert that .ttf to .eot, .woof anf .otf.

[编辑 2013-03-06 ！重要]我找不到任何明显的问题，所以我尝试了闻所未闻的解决方案。我尝试了两个在线字体转换工具。首先，我使用http://www.freefontconverter.com/将原始的 FontAwesome svg 转换为 ttf。然后我使用http://www.font2web.com/将该 .ttf 转换为 .eot、.woof anf .otf。

Results: opera mobile now displays icons properly.(I don't know whats are the changes, but works)

结果：opera mobile 现在可以正确显示图标。（我不知道有什么变化，但有效）

The problem now is Blackberry 6. I tested @font-face with a BB Curve 9300, Modernizr and Google fonts and all is ok. But FontAwesome still doesn't work...

现在的问题是黑莓6。我用 BB Curve 9300、Modernizr 和 Google 字体测试了 @font-face，一切正常。但是 FontAwesome 仍然不起作用......

---

---

[EDIT 2013-03-01] Opera mobile 10+ supports @font-face, so the problem may be another. I tried with another server font with @font-face and works ok, but with FontAwesome I can't show icons properly.

[EDIT 2013-03-01] Opera mobile 10+ 支持@font-face，所以问题可能是另一个。我尝试使用带有 @font-face 的另一种服务器字体并且工作正常，但是使用 FontAwesome 我无法正确显示图标。

[EDIT 2013-03-03] The problem is not just with my website, Font Awesome website examples and tests are not working...

[编辑 2013-03-03] 问题不仅仅在于我的网站，Font Awesome 网站示例和测试不起作用...

[EDIT 2013-03-4]I'm tried to make a fallback using Modernizr "font-face" feature detection, but opera Mobile and BlackBerry 6 return true because they supports that-feacture. How I can detect if FontAwesome font is loaded?

[编辑 2013-03-4]我试图使用 Modernizr 的“font-face”功能检测进行回退，但 opera Mobile 和 BlackBerry 6 返回 true，因为它们支持该功能。 如何检测 FontAwesome 字体是否已加载？

回答by Jesse

There are a couple different issues I would look into that I hope help you fix it.

我会调查几个不同的问题，希望能帮助你解决它。

If you mention what font worked we could probably help out better. I would compare the font that you said worked with FontAwesome to see what the differences are. I would bet the glyphs are mapped to a different unicode area and maybe the browser doesn't read from there?

如果您提到哪种字体有效，我们可能会提供更好的帮助。我会比较您所说的与 FontAwesome 一起使用的字体，看看有什么区别。我敢打赌字形被映射到不同的 unicode 区域，也许浏览器不会从那里读取？

You could use a tool like Font Forge to check differences from other fonts. I noticed when trying to re-generate the FontAwesome font from Font Forge I got validation errors with the em spacing and the glyphs had errors (self-intersecting, wrong direction, missing points at extrema). I've seen this before in icon fonts and never had an issue but I haven't tested on Opera before either. If you compare trying to generate a font with something that works you could probably narrow the issue down.

您可以使用 Font Forge 之类的工具来检查与其他字体的差异。我注意到当尝试从 Font Forge 重新生成 FontAwesome 字体时，我收到了 em 间距的验证错误，并且字形有错误（自相交、错误方向、极值缺失点）。我以前在图标字体中看到过这个，从来没有遇到过问题，但我之前也没有在 Opera 上进行过测试。如果您将尝试生成字体与有效的字体进行比较，您可能会缩小问题的范围。

Other Stuff I'm sure you covered but double checking:

其他东西我相信你已经涵盖了但要仔细检查：

I read here that having a local version of the font installed might conflict with the font embed. https://github.com/FortAwesome/Font-Awesome/issues/247

我在这里读到安装本地版本的字体可能与嵌入的字体冲突。https://github.com/FortAwesome/Font-Awesome/issues/247

If you took the icon-font and then added your own glyphs to it then used something like font squirrel to generate all the web safe formats make sure you told the generator to add the unicode range of the glyphs you created. Once I forgot to do this and the app only added the glyphs in the a-z range. An easy way to check is to look at the gyphs tab in the demo html page and make sure all the icons are included.

如果您使用图标字体，然后将您自己的字形添加到其中，然后使用诸如 font squirrel 之类的东西来生成所有网络安全格式，请确保您告诉生成器添加您创建的字形的 unicode 范围。一旦我忘记这样做，应用程序只添加了 az 范围内的字形。一种简单的检查方法是查看演示 html 页面中的 gyphs 选项卡，并确保包含所有图标。

You're using the proper CSS3 font-face rule and embedding eot, ttf, woff, and svg and you've waited a little bit. I noticed on some old iphones the font takes forever to display.

您正在使用正确的 CSS3 字体规则并嵌入 eot、ttf、woff 和 svg，您已经等了一会儿。我注意到在一些旧的 iphone 上，字体需要永远显示。

Using a tool like modernizr font-face feature detect might make some of the support between browsers a little easier.

使用像 Modernizr font-face feature detection 这样的工具可能会使浏览器之间的一些支持更容易一些。

I'm curious to see what the issue is.

我很好奇是什么问题。

回答by vorillaz

Opera Mini does not support font-face as it is mentioned in the official website http://www.opera.com/docs/specs/productspecs/

Opera Mini 不支持 font-face，因为它在官方网站http://www.opera.com/docs/specs/productspecs/ 中提到

One "dirty" little trick I could think, will be to convert your font to SVG and use it in your CSS as it is Partial supported(as it is also written in their website).

我能想到的一个“肮脏”的小技巧是将您的字体转换为 SVG 并在您的 CSS 中使用它，因为它是部分支持的（因为它也写在他们的网站上）。

Something like

就像是

.icon{

 background-image: url(icon.svg);
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
}

Take also a look at the link above http://www.w3.org/TR/SVGTiny12/fonts.html

也看看上面的链接 http://www.w3.org/TR/SVGTiny12/fonts.html

UPDATE

更新

Opera mini does not support FontAwesome in IOS 6.1

Opera mini 在 IOS 6.1 中不支持 FontAwesome

Neither other font-face examples work(http://codepen.io/bennettfeely/full/ErFGv)

其他字体示例都不起作用（http://codepen.io/bennettfeely/full/ErFGv）

But using SVG seems a great solution, proof of the concept Original source: http://dbushell.com/demos/css-sprites/More infos of the demo above: http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

但是使用 SVG 似乎是一个很好的解决方案，概念的证明原始来源：http: //dbushell.com/demos/css-sprites/以上演示的更多信息：http: //coding.smashingmagazine.com/2012/01/ 16/resolution-independence-with-svg/

回答by Gonzalo

SOLUTION FOR OPERA MOBILE (No Opera Mini)

OPERA MOBILE 解决方案（无 Opera Mini）

I tried with two online font conversion tools. First I used http://www.freefontconverter.com/to convert the original FontAwesome svg to ttf. Then I used http://www.font2web.com/to convert that .ttf to .eot, .woof anf .otf.

我尝试了两个在线字体转换工具。首先，我使用http://www.freefontconverter.com/将原始的 FontAwesome svg 转换为 ttf。然后我使用http://www.font2web.com/将该 .ttf 转换为 .eot、.woof anf .otf。

Finally, I replaced the original files and now Opera mobile displays icons properly.

最后，我替换了原始文件，现在 Opera mobile 可以正确显示图标。

回答by Alexey Ivanov

For that I know there is for @font-face support in Opera Mini and only partial @font-face support in Andoroid from 2.2 to 3.0 (earlier Android versions didn't have @font-face support at all). See: http://caniuse.com/fontface

为此，我知道 Opera Mini 中有 @font-face 支持，而 Andoroid 从 2.2 到 3.0 中只有部分 @font-face 支持（早期的 Android 版本根本没有 @font-face 支持）。见：http: //caniuse.com/fontface

Partial support from that I know means that they din't support DRM-protected fonts and some syntax like "smiley" syntax didn't work for them.

我知道部分支持意味着它们不支持受 DRM 保护的字体，并且某些语法（如“笑脸”语法）对它们不起作用。

So if you want to show icons on Opera Mini and Android 2.1 you will need to make fallback to image icons. If you have problems with Android 2.2-3.0 you can probably fix it by changing syntax.

因此，如果您想在 Opera Mini 和 Android 2.1 上显示图标，则需要回退到图像图标。如果您在使用 Android 2.2-3.0 时遇到问题，您可以通过更改语法来解决它。

回答by Frin

1. Go to http://icomoon.io/app/

2. Push button Icon Library

3. Add library Font Awesome

4. Select icons you desire

5. Push button Font (export icons to css font awesome)

6. Replace Fonts Awesome (ttf, svg. etc...) with new Fonts Awesome

1. 转到http://icomoon.io/app/

2. 按钮图标库

3. 添加库字体真棒

4. 选择你想要的图标

5. 按钮字体（将图标导出到 css 字体真棒）

6. 用新的 Fonts Awesome 替换 Fonts Awesome（ttf、svg 等...）

CSS

CSS

 @font-face{
font-family:"FontAwesome";
src:url('../fonts/awesome/fontawesome.eot');
src:url('../fonts/awesome/fontawesome.eot?#iefix') format('embedded-opentype'),
url('../fonts/awesome/fontawesome.woff') format('woff'),    url('../fonts/awesome/fontawesome.ttf') format('truetype'),
        url('../fonts/awesome/fontawesome.svg#fontawesomeregular') format('svg');
font-weight:normal;font-style:normal;}.flag:before,.mobile:before{font-family:"FontAwesome";font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;display: inline-block; text-decoration: inherit;}.flag:before{content:"\f024";}.mobile:before{content:"\f10b";}

I try this and then Awesome Fonts works in Opera Mobile :)

我尝试了这个，然后 Awesome Fonts 可以在 Opera Mobile 中工作了 :)

回答by user568109

Such bugs are reported for FortAwesome:

FortAwesome 报告了此类错误：

1. https://github.com/FortAwesome/Font-Awesome/issues/246
2. https://github.com/FortAwesome/Font-Awesome/issues/791

1. https://github.com/FortAwesome/Font-Awesome/issues/246
2. https://github.com/FortAwesome/Font-Awesome/issues/791

They are yet to be fixed, they have contacted Opera dev relations to find out what is causing this. You don't have much option except to wait for them to fix it. Track the bugs to find out more.

他们还没有得到修复，他们已经联系了 Opera 开发人员，以找出导致这种情况的原因。除了等待他们修复它之外，您别无选择。跟踪错误以了解更多信息。

回答by dusthaines

Perhaps this is charset related? Are you declaring for UTF-8 in your document as well as in your stylesheet?

也许这与字符集有关？您是否在文档和样式表中声明了 UTF-8？

<meta charset="UTF-8">

or

或者

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

and in stylesheet (note, must be first line, first col):

并在样式表中（注意，必须是第一行，第一列）：

@charset "utf-8";

回答by Guillermo Siliceo Trueba

As a reference, i had this problem and the issue was domains. Some browsers, Firefox notably refuse to load fonts from another domain(called Same domain policy). The headers

作为参考，我遇到了这个问题，问题是域。某些浏览器，Firefox 特别拒绝从另一个域加载字体（称为相同域策略）。标题

Access-Control-Allow-Origin "*"

In nginx for example this is configured like this:

例如在 nginx 中，它是这样配置的：

location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

Must be set, and also remember that the content type of the fonts must be

必须设置，还要记住字体的内容类型必须是

application/x-font-ttf                ttf;
font/opentype                         otf;
application/vnd.ms-fontobject         eot;
font/x-woff                           woff;

The wrong content type might cause the font not load, so you lose the icons. Its good to have this info as reference :)

错误的内容类型可能会导致字体无法加载，从而丢失图标。将此信息作为参考很好:)

回答by emik

Me too I had problems getting a SVG-font to display in Blackberry. The problem is the name of the svg (in the document) and the name of the font-family have to be the same. I found this answer here, in the comments to the last answer:

我也是，我在让 SVG 字体在 Blackberry 中显示时遇到了问题。问题是 svg 的名称（在文档中）和字体系列的名称必须相同。我在这里找到了这个答案，在最后一个答案的评论中：

@fontface on blackberry os 7

黑莓操作系统 7 上的 @fontface

回答by Misikir

use icomoon app http://icomoon.io/app/to change the svg font to web fonts and replace the old font for Font Awesome . it works for me in opera mobile

使用 icomoon 应用程序 http://icomoon.io/app/将 svg 字体更改为 web 字体并替换旧字体为 Font Awesome 。它在歌剧手机中对我有用