我已经使用字体真棒图标有一段时间了，但在一家外部公司进行了一轮错误跟踪后，他们发现字体真棒图标在某些情况下没有显示。
字体的版本真棒是4.3.0
来自外部公司的不可用版本：iPad4(iOS 7.1.2)Mac OS 10.10.x上的Safari 8.0.2Mac OS 10.9.x上的Safari 7.1.2Safari 7.1.4和8.0.2Mac OS X 10.10.2(14C109)上的Safari版本8.0.3(10600.3.18)iPad Air 2与iOS 8.0.3
我们在以下方面进行了内部测试：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，并将字体内联：
<?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;
}