字体Awesome图标不工作在一些浏览器 [英] Font Awesome Icons are not working in some browsers
问题描述
我使用Bootstrap + Font Awesome，大多数桌面和移动浏览器都可以使用，但是Font awesome图标不支持某些浏览器，如opera Mobile，Opera Mini和某些版本的Android浏览器。
只显示一个空白矩形。
有人知道这个问题吗？
]
我找不到任何明显的问题，所以我试着与未听到的解决方案。
我尝试了两个在线字体转换工具。
首先我使用
如果你采用图标字体，然后添加自己的字形，然后使用像字体松鼠生成所有的Web安全格式，确保你告诉发电机添加unicode范围您创建的字形。一旦我忘了这样做，应用程序只添加了字形在a-z范围。一个简单的检查方法是查看演示html页面中的gyphs选项卡，并确保包含所有图标。
您正在使用正确的CSS3字体，面部规则和嵌入eot，ttf，woff和svg，你已经等了一会儿。我注意到一些旧的字体永远显示的字体。
使用一个工具，如modernizr font-face功能检测可能会使浏览器之间的一些支持更容易一些。
我很想知道这是什么问题。
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.
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.
Results: opera mobile now displays icons properly. (I don't know whats are the changes, but works)
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...
[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-03] The problem is not just with my website, Font Awesome website examples and tests are not working...
[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?
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?
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.
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
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.
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.
Using a tool like modernizr font-face feature detect might make some of the support between browsers a little easier.
I'm curious to see what the issue is.
这篇关于字体Awesome图标不工作在一些浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
