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?

Miskolc

Other images enabled? Yes. I placed a png icon to show they are working properly – Miskolc

Can you post css you are using for calling fontawesome – Genesis

You don't need any other css, only font-awesome.css (and maybe font-awesome-ie7.min.css) – Miskolc

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.

Sanborne

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? – Miskolc

What font worked? If you tried google fonts and those worked I'm guessing its where the glyphs are mapped with font awesome. – Sanborne

Many web fonts are working. In fact, the only font that doesn't work is FontAwesome. I tested some Google fonts for example: fonts.googleapis.com/css?family=Devonshire. @font-face { font-family: 'Devonshire'; font-style: normal; font-weight: 400; src: local('Devonshire-Regular'), url(themes.googleusercontent.com/static/fonts/devonshire/v2/…) format('woff'); } – Miskolc

Okay I would download Font Forge and move the glyphs around. Instead of having your font icons wherever they are, try moving them to another PUA, then export through Font Squirrel and I bet it works. – Sanborne

@Jesse, may I ask you to have a look at an opera-mobile related question here : tinyurl.com/ovglq92 ? – Derrickderriey

@IstiaqueAhmed - When testing mobile web I always test on a real device. You can't make any guarantees testing on a simulator. – Sanborne

@Jesse, how many real devices is it possible to use for testing purpose? What is the real solution then ? – Derrickderriey

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/

Airtight

Answer 3

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.

Miskolc

Answer 4

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

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 :)

Renwick

Answer 5

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.

Heatherheatherly

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. – Miskolc

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? – Miskolc

The problem is not @font-face. It is supported by opera mobile 10+ and BlackBerry 6+ Font Awesome font doesn't use DRM, and stylesheet doesn't contain "smiley" syntax Thank you, but in this case that is not the best answer. – Miskolc

Sorry that I wasn't able to help. Hope that you will find that the problem was in. – Heatherheatherly

Answer 6

Such bugs are reported for FortAwesome:

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.

Clack

Answer 7

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

<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";

Roadrunner

Yes, I declared Charset UTF8 in documents and stylesheet, but that's not the problem. – Miskolc

Answer 8

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

Access-Control-Allow-Origin "*"

In nginx for example this is configured like this:

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 :)

Characteristically

Answer 9

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

Neighbor

Answer 10

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

Statuette