Font Awesome 圖標在 OSX 中不起作用 Safari

Question

我font-awesome圖標在 Firefox 和 Chrome 中運行良好，但在 Safari 中，我只看到其中一些圖標有空白，而其他圖標則沒有。 截屏：

如您所見， fa-twitter 、 fa-instagram和其他圖標都沒有顯示，無論是在 Font Awesome 網站上還是當我嘗試將它們與<i class="fa fa-instagram"></i>一起使用時<i class="fa fa-instagram"></i> 。

真的很奇怪，我已經清除了十幾次緩存，但無法弄清楚這里還有什么問題。

有任何想法嗎？

Answer 1

可能還有另一個問題在起作用——我遇到了一個類似的問題，自定義生成的圖標集（使用自定義字體）會顯示在 Chrome、Firefox 和某些版本的 Safari 中，但沒有 iOS 版本。 我確定我沒有啟用彈出窗口阻止程序，但仍然遇到問題。

通過一些研究，我發現將此屬性添加到圖標字體的 CSS 解決了這個問題：

text-rendering: optimizeLegibility;

添加此屬性后，所有瀏覽器中的渲染都可以正常工作。

Answer 2

您在 Safari 中安裝了廣告攔截器插件嗎？
根據 Font Awesome 文檔，社交網絡的圖標可以被這樣的插件屏蔽。

Answer 3

似乎 Safari 會阻止未簽名的字體。 使用具有完整性的 CDN 可以解決問題：

對於很棒的字體，我使用了以下鏈接，該鏈接位於： https ://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Answer 4

您使用的是最新版本的 Chrome 嗎？ 他們現在有一個自定義版本的 web-kit，一個名為 Blink 的分支，所以即使它們顯示在 Chrome 中，現在，您可能需要檢查另一個 web-kit 瀏覽器才能確定。

另外，可怕的 IE 是什么？ 他們在那里展示嗎？

我通常必須實際“重置 Safari”，而不是僅僅清除緩存才能真正清除緩存！

Answer 5

嘗試這個。 這個對我有用。

@font-face {
    font-family: 'FontAwesome'; 
    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.ttf?v=4.4.0') format('truetype'),
        url('../fonts/fontawesome webfont.svg?v=4.4.0#fontawesomeregular') format('svg'); 
    font-weight: normal; 
    font-style: normal;
}

Answer 6

就我而言，我的品牌圖標字體系列錯誤。

我的舊 CSS：

font-family: "FontAwesome";

我的新（工作）CSS：

font-family: "Font Awesome 5 Brands";
font-weight: 900;

這應該可以幫助任何使用舊代碼並在顯示品牌圖標（Twitter、Facebook 等）時遇到問題的人

Answer 7

嘗試清除您的緩存，我以前曾經發生過這種情況，並且在我清除緩存后已修復（盡管我使用的是 Chrome）。

Answer 8

當我在一個網站上禁用它時，它肯定是Adblocker，我有一個問題，它修復了它

Answer 9

這發生在我們的網站上，即使是非品牌圖標，FontAwesome fa-share-square-o，\\ f045。 這是由廣告攔截器引起的。 一旦我們的網站列入白名單，就會出現圖標。

Answer 10

我發現如果有一個壓倒一切的 svg 樣式的width: auto; height: auto width: auto; height: auto ， svg （或字體真棒圖標）不會在 Safari 中顯示。

設置寬度和高度值或使用width: inherit; height: inherit width: inherit; height: inherit

Answer 11

我知道已經很多年了，但是對於仍然處理這個問題的任何人，您可以在 <link> 的 href 中添加請求參數“?v=1234”

前：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

后：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css?v=1234" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

感謝@animaster 的答案： https://github.com/FortAwesome/Font-Awesome/issues/7770#issuecomment-346301072