我一直在使用Font Awesome图标一段时间但是在从外部公司进行了一轮错误跟踪之后，他们发现在某些情况下字体真棒图标没有显示。
字体真棒的版本是4.3.0
不在外部公司工作的版本： iPad4（iOS 7.1.2） Mac OS 10.10.x上的Safari 8.0.2 Mac OS 10.9.x上的Safari 7.1.2 Safari 7.1.4和8.0.2 Mac OS X 10.10.2（14C109）上的Safari版本8.0.3（10600.3.18） 带有iOS 8.0.3的iPad Air 2
我们内部测试过： Safari 8.0.2
问题顺序1 - 登录网站 - 图标可见 - 注销，关闭浏览器，删除所有网站数据，重新登录 - 不显示图标/方块
问题顺序2 - 登录网站 - 图标不可见/正方形存在
网站在自己的专用服务器上，使用灯泡。没有发生在FF，Chrome甚至IE上。
如果有人有同样的问题或知道有效的解决方案，请帮助。我们已经查看并尝试了大约10种不同的东西，即源订购，更新css，使用网站链接等
我在Mac OSX（Yosemite）+ Safari 8.0.8和各种iOS 6设备上遇到了同样的问题。我的目标是Font Awesome 4.2.0，在IIS Web服务器上本地托管。
奇怪的是，我发现，使用缓存破坏者为Font Awesome CSS库添加后缀修复了该问题。例如
font-awesome.min.css?v=1234
我不明白为什么这是必要的，但到目前为止似乎有效。
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css" />
将此代码放入您的 <head> </head>文件，没关系。我想从苹果野生动物园需要一些签名。
我们确实找到了这样做的方法，但这是一个临时解决方案。它可能有所帮助。我们将浏览器版本检测为Safari并传递font-face inline：
<?php
//ugly workaround for fontawesome issue in Safari
$ua = $_SERVER["HTTP_USER_AGENT"];
$safariorchrome = strpos($ua, 'Safari') ? true : false;
$chrome = strpos($ua, 'Chrome') ? true : false;
if ($safariorchrome == true AND $chrome == false):
?>
<style type="text/css">
@font-face{font-family:'FontAwesome';src:url('/css/current-font-awesome/fonts/fontawesome-webfont.eot?v=4.3.0');src:url('/css/current-font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),url('/css/current-font-awesome/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),url('/css/current-font-awesome/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),url('/css/current-font-awesome/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),url('/css/current-font-awesome/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}
</style>
<?php endif; ?>
我们面临同样的问题。除iPad外，其他浏览器中的材质图标加载完全正常。它首次加载，后续加载显示文本而不是图标。尝试所有解决方案，如自托管，调用谷歌API和CDN。没有什么对我们有用。任何帮助将不胜感激。但是当您刷新页面时，图标会被加载..
解决这个问题的方法是在窗口加载期间和iPad时强行重新加载页面。这应该可以解决问题。
var isTabLoaded = sessionStorage.getItem("isTabLoaded") == "true";
var isUserBrowserIPad = navigator.userAgent.indexOf('iPad') > -1
if (!isTabLoaded && isUserBrowserIPad) {
window.location.reload();
sessionStorage.setItem("isTabLoaded", "true");
};
Step 1- Give fontawesome.css link in proper formate. - like type and rel
<link type="text/css" href="~/Content/font-awesome.css?v=1234" rel="stylesheet" />
Step 2-Some Changes in fontawesome css.
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype');
src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}