Safari 和 iPad 中不显示 Font Awesome 图标答案

【问题标题】：Font Awesome icon not displaying in Safari and iPadSafari 和 iPad 中不显示 Font Awesome 图标
【发布时间】：2015-04-17 10:27:54
【问题描述】：

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

字体 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、使用网站链接等

【问题讨论】：

我也遇到了这个问题，想知道你是否在这方面取得了任何进展。我已经尝试过自己托管它和 maxcdn 版本...
我们遇到了同样的问题，stackoverflow.com/questions/30193615/…
我已经向 Apple 开具了支持票，但到目前为止，他们只要求提供更多信息，而没有任何关于问题的反馈。

标签： font-awesome

【解决方案1】：

我在 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 上显示正方形。如上所述重置的缓存版本修复了它。
非常简单但有效的解决方案。很棒的想法。
这为我解决了这个问题，我正在使用适用于 v5.7.2 的 FontAwesome CDN。

【解决方案2】：

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css" /> 将此代码放入您的<head> </head>文件中，就可以了。我猜苹果的 safari 需要一些签名。

【讨论】：

这对我有用。也许这个 CDN 不会导致缓存问题。

【解决方案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; ?>

【讨论】：

这对我有用。需要明确的是，它在 HTML 中定义了 @font-face，即使它与 font-awesome.css 中的（重复）定义相同，也可以修复它。

【解决方案4】：

我们面临同样的问题。材质图标在 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");
          };

【讨论】：

【解决方案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;
}

【讨论】：

以上代码 100% 可用于 Safari 9+ 和 IE、Firefox、Chrome、Safari