Question

查看屏幕截图：http://awesomescreenshot.com/0242jcea3a

某些FontAwesome图标根本不会在Firefox中显示，但其他人会这样做。列举一些不加载的内容：

的YouTube
Vimeo的
Instagram
视频播放按钮

我们正在使用最新的CDN版本（//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css）。运行Firefox 28. HTML页面也是字符集UTF-8。

不知道造成这种情况的原因，但这是一个非常烦人的错误，特别是当它在Chrome和Safari等中运行良好时。

我尝试过在本地加载字体而不是CDN，不幸的是，这并没有解决问题。我还尝试了下面的htaccess代码：

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

Firefox中没有显示安全/控制台错误？

非常感谢任何帮助：）

Answer 1

也许Base64编码是您正在寻找的。 Font Awesome 不提供此功能..您可以尝试 IcoMoon App （http：// icomoon [dot] io /）。

Firefox 27.0 Mac OS X 10.8屏幕截图 http：// api [dot] browsershots [dot] org / png / original / 93 / 932ccfb4f1b4dd3672f04607b4816b4a [dot] png

Firefox 27.0 Windows 7 Screenshoot HTTP：// API [点] browsershots [点]组织/ PNG /原始/ AE / ae10896d922a40c773f0fb59b325c4c9 [点] PNG

JSFiddle： http：// jsfiddle [dot] net / hiru / 79BYM /
在IcoMoon App上编码： http：// sosweetcreative [dot] com / wp-content / uploads / blogimg-base64-iconmoon [dot] jpg
来源： http：// sosweetcreative [dot] com / 2613 / font-face-and-base64-data-uri

Answer 2

您的htaccess代码似乎不完整。请尝试使用此功能：

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

在再次测试之前，请务必清除您的网站，CDN和浏览器缓存。

这是一个已知错误，已在此ticket

中进行了讨论

FontAwesome Firefox与某些字体有关

2 个答案: