FontAwesome Firefox issues with certain fonts

问题

See screenshot: http://awesomescreenshot.com/0242jcea3a

Certain FontAwesome icons don't display in Firefox at all, but others do. To name a few of the ones that don't load:

YouTube
Vimeo
Instagram
Video Play Button

We are using the latest CDN version (//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css). Running Firefox 28. The HTML page is charset UTF-8 also.

No idea what's causing this, but it's a really annoying bug, especially when it works fine in Chrome and Safari etc.

I've tried loading the font locally instead of over CDN, and unfortunately this didn't fix the issue. I've also tried the below htaccess code:

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

There are no security/console errors showing in Firefox either?

Any help would be greatly appreciated :)

回答1:

Maybe a Base64 Encoding is what you're looking for. Font Awesome doesn't offer this feature.. You can try with IcoMoon App ( http://icomoon[dot]io/ ).

Firefox 27.0 Mac OS X 10.8 Screenshoot http://api[dot]browsershots[dot]org/png/original/93/932ccfb4f1b4dd3672f04607b4816b4a[dot]png

Firefox 27.0 Windows 7 Screenshoot http://api[dot]browsershots[dot]org/png/original/ae/ae10896d922a40c773f0fb59b325c4c9[dot]png

JSFiddle: http://jsfiddle[dot]net/hiru/79BYM/
Encode on IcoMoon App: http://sosweetcreative[dot]com/wp-content/uploads/blogimg-base64-iconmoon[dot]jpg
Source: http://sosweetcreative[dot]com/2613/font-face-and-base64-data-uri

回答2:

Looks like your htaccess code is incomplete. Try with this instead:

<FilesMatch ".(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Also make sure to clear your Website, CDN and browser cache before testing it again.

This is a known bug and has been discussed in this ticket

来源：https://stackoverflow.com/questions/22606372/fontawesome-firefox-issues-with-certain-fonts

标签

css

firefox

font-awesome