问题
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?
回答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.
回答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/
回答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.
回答4:
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.
回答5:
Such bugs are reported for FortAwesome:
- https://github.com/FortAwesome/Font-Awesome/issues/246
- 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.
回答6:
Go to http://icomoon.io/app/
Push button Icon Library
Add library Font Awesome
Select icons you desire
Push button Font (export icons to css font awesome)
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 :)
回答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";
回答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 :)
回答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
回答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
来源：https://stackoverflow.com/questions/15028602/font-awesome-icons-are-not-working-in-some-browsers