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

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

Answer 2

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.

Answer 3

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/

Answer 4

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

Answer 5

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

Answer 6

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