Font Awesome Icons are not working in some browser

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

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

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.

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.

Answer 2

SOLUTION FOR OPERA MOBILE (No 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.

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

Answer 3

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:

@fontface on blackberry os 7

Answer 4

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.