物化 css 图标不显示在 Safari 浏览器中答案

【问题标题】：Materialize css icons doesn't show up in Safari browser物化 css 图标不显示在 Safari 浏览器中
【发布时间】：2016-03-16 18:28:56
【问题描述】：

我注意到materialized CSS 图标没有出现在Safari (v5.1.7 (7534.57.2) 中。在这个主题上进行了很多搜索，但没有任何关于浏览器兼容性的文档，其中列出了 safari。谁能告诉我这是一个需要修复的错误，还是有其他方法可以在 Safari 中完成这项工作。

其他浏览器

Safari 浏览器

PS：materializecss 的其他功能除了图标都很好用

【问题讨论】：

标签： html css safari materialize

【解决方案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 上尝试过，但它确实对我自己托管的字体图标有用。所以让我们都知道事情是如何进行的，这样万一没有，我们可以尝试一些替代解决方案。

【讨论】：