logo标签列表

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

font-awesome
12

我已经使用Font Awesome图标有一段时间了，但在外部公司进行的一轮错误跟踪后，他们发现在某些情况下无法显示Font Awesome图标。

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 Version 8.0.3 (10600.3.18) 搭载iOS 8.0.3的iPad Air 2

我们在内部测试了： Safari 8.0.2

问题序列1 - 登录网站 - 图标可见 - 退出登录，关闭浏览器，删除所有网站数据，重新登录 - 没有图标/正方形出现

问题序列2 - 登录网站 - 根本无法看到图标/正方形存在

该网站位于自己的专用服务器上，使用lamp。在Firefox、Chrome甚至IE上没有发生这种情况。

如果有人遇到过同样的问题或知道有效的解决方法，请帮忙。我们已经尝试了大约10种不同的方法，例如源代码排序、更新CSS、使用网站链接等等。

我也遇到了这个问题，不知道你有没有取得任何进展。我已经尝试过自己托管和使用MaxCDN版本... - Kevin
我们遇到了同样的问题，http://stackoverflow.com/questions/30193615/icon-font-are-rendered-as-squares-on-subsequent-visits-in-safari-ios-and-osx - Kristoffer
我已经向苹果公司开了一个支持工单，但到目前为止，他们只是要求更多的信息，没有关于问题的任何反馈。 - Kristoffer
5个回答
9

我在使用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

我不明白为什么这是必要的，但目前看起来似乎有效。
我认为这是一个最近出现的问题。它可以在桌面Chrome、iPad上工作，但在我的iPhone上会显示方块。像上面所述的缓存版本重置解决了这个问题。 - Satbir Kira
简单而有效的解决方案。思维敏捷，非常出色。 - pim
这对我解决了问题，我正在使用FontAwesome CDN v5.7.2。 - Rob Reagan
5
将此代码放入您的<head></head>文件中，它就可以正常工作了。我猜需要一些来自苹果Safari的签名。<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css" />
这对我有用。也许这个CDN不会引起缓存问题。 - starfighter104
2
我们遇到了同样的问题。Material icons在iPad以外的其他浏览器中加载得非常完美。第一次加载时它可以正常加载，但是再次加载时，显示的是文本而不是图标。我们尝试了所有的解决方案，如自行托管、调用Google 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");
          };
2
我们找到了一种方法来实现这个功能，但这只是一个临时解决方案。它可能会有所帮助。我们检测浏览器版本是否为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; ?>
这对我有用。明确地说，它在HTML中定义了@font-face，即使它与font-awesome.css中的定义相同（重复），也可以解决问题。 - Ben
0
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;
}
以上代码在Safari 9+、IE、Firefox、Chrome和Safari上均能正常运行。 - Awadhesh Singh
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接