Ikony Materialise css nie wyświetlają się w przeglądarce Safari

Question

Zauważyłem, że ikony materialized CSS nie pojawiają się w Safari (v5.1.7 (7534.57.2). Dobrze przeszukiwane na ten temat, ale nie ma żadnej dokumentacji na temat zgodności przeglądarki, gdzie safari zostało wymienione. Czy ktoś może dać mi znać, jeśli jest to błąd, który należy naprawić lub czy istnieją alternatywy, aby uzyskać to działa w Safari.

Inne przeglądarki

Safari Przeglądarka

PS: Inne funkcjonalności materializecss działa dobrze z wyjątkiem ikony

Answer 1

Zmierzyłem dokładnie ten sam problem. Poniższe podejście pomogło mi:

• Miałem problemy z ikonami fontów dostarczonymi przez materializuj css. Wydaje się, że jest jakiś problem z ikonami czcionek na wypadek, gdybyś sam go hostował. Zaktualizuję moją odpowiedź z dokładnym numerem błędu. Aby to naprawić, pobrałem i użyłem czcionek dostarczonych przez Google i wykonałem czynności wymienione powyżej pod numerem here.

• należy dołączyć następujące do swojego 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'; 
  } 
  

• Inną rzeczą, aby upewnić się, że jest o to, że używasz wszystkich formatów czcionek dostarczonych przez Google: WOFF2, WOFF, TrueType, EOT, a nawet SVG, jeśli to możliwe, aby zapewnić zgodność z przeglądarką.

W przypadku, gdy samemu nie udostępniasz ikon fontów, spróbuj podać wyżej wspomniany kod CSS. Nie próbowałem tego z CDN, ale zadziałało to dla mnie z własnymi hostowanymi font-icons. Więc daj nam znać, jak to wszystko działa, tak, że jeśli nie, możemy wypróbować alternatywne rozwiązanie.