物化css圖標不顯示在Safari瀏覽器

Question

我注意到materialized CSS圖標不顯示在Safari (v5.1.7 (7534.57.2)。很好地搜索了很多關於這個主題，但沒有任何有關瀏覽器兼容性的文檔，其中safari已被列出。任何人都可以告訴我，如果這是一個需要修復的bug，或者有任何其他方法可以在Safari中獲得這項工作。

其他瀏覽器

Safari瀏覽器

PS：的materializecss作品其他功能以及除圖標

Answer 1

我面臨完全相同的問題。以下方法對我有幫助：

• 我遇到了物化css提供的字體圖標的問題。如果您自己託管它，似乎在字體圖標上會出現一些問題。我會用確切的錯誤號更新我的答案。爲了解決這個問題，我下載並使用了Google提供的字體圖標，並遵循here提到的步驟。

• 一定要追加以下你的CSS：

  .material-icons { 
      font-family: 'Material Icons'; 
      font-weight: normal; 
      font-style: normal; 
      font-size: 24px; /* Preferred icon size */ 
      display: inline-block; 
      line-height: 1; 
      text-transform: none; 
      letter-spacing: normal; 
      word-wrap: normal; 
      white-space: nowrap; 
      direction: ltr; 
  
      /* Support for all WebKit browsers. */ 
      -webkit-font-smoothing: antialiased; 
      /* Support for Safari and Chrome. */ 
      text-rendering: optimizeLegibility; 
  
      /* Support for Firefox. */ 
      -moz-osx-font-smoothing: grayscale; 
  
      /* Support for IE. */ 
      font-feature-settings: 'liga'; 
  } 
  

• 的另一件事情，以確保是看它，你所有正在使用谷歌提供的字體格式：WOFF2，WOFF，的TrueType，如果可能的話，甚至是SVG，以確保跨瀏覽器的兼容性。

如果你不是自承載的字體圖標，只是嘗試包括上面提到的CSS代碼。我還沒有用CDN嘗試過，但是它確實對我自己託管的字體圖標有效。所以，讓我們都知道事情是如何解決的，如果不行的話，我們可以嘗試一些替代解決方案。