Font Awesome Icons are not working in some browsers

Question

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?

Answer 1

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.

Answer 2

Opera Mini does not support font-face as it is mentioned in the official website 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).

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

UPDATE

Opera mini does not support FontAwesome in IOS 6.1

Neither other font-face examples work(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/