SafarisブラウザにCSSアイコンが表示されない

Question

materialized CSSアイコンがSafari (v5.1.7 (7534.57.2)に表示されないことに気付きました。よくこのトピックで多く検索されていますが、サファリがリストされているブラウザの互換性に関するドキュメントはありませんでした。誰かが私にこれを修正しなければならないバグか、Safariでこの作業をするための選択肢があるかどうか知らせてくれますか？

他のブラウザ

Safariブラウザ

PS：だけでなく、アイコン

除く materializecss作品のその他の機能

Answer 1

私はまったく同じ問題に直面しました。次のアプローチは私を助けました：

• 私はmaterialize 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'; 
  } 
  

• ことを確認するためにもう一つは、あなたは、Googleが提供するすべてのフォント形式を使用していることをそれに確認することです：WOFF2、WOFF、なTruetype、クロスブラウザとの互換性を確保するために可能な場合はEOT、SVGさえも含みます。

フォントアイコンを自己ホストしていない場合は、上記のCSSコードを含めるようにしてください。私はCDNでこれを試したことはありませんが、それは自己ホストフォントアイコンのために私のために働いた。だから、私たちは皆、物事がどのように機能するかを知ってもらいましょう。そうでない場合は、代わりの解決策を試すことができます。