Question

我一直在使用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，使用网站链接等等

Answer 1

我在Mac OSX（Yosemite）+ Safari 8.0.8以及各种iOS 6设备上遇到了同样的问题。我定位的是Font Awesome 4.2.0，在IIS网络服务器上本地托管。

奇怪的是，我发现使用缓存破坏程序后缀Font Awesome CSS库的路径修复了这个问题。 e.g。

font-awesome.min.css?v=1234

我不明白为什么这是必要的，但到目前为止似乎有效。

Answer 2

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css" /> 把这段代码放到你的<head> </head>文件中，没关系。我想从苹果野生动物园需要一些签名。

Answer 3

我们确实找到了这样做的方法，但这是一个临时解决方案。它可能有所帮助。我们将浏览器版本检测为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; ?>

Answer 4

我们面临同样的问题。除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");
          };

Answer 5

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;
}

Font Awesome图标无法在Safari和iPad中显示

5 个答案: