Question

我有一个使用Middleman，Webpack和Materialize的网站，除了在Internet Explorer和Firefox上没有呈现Material Icons之外，我们在其中一个页面中有一个React组件。在网站的其余部分中的所有图标在所有浏览器中都能正常工作。任何帮助将不胜感激。

使用的包

materialize-css 0.100.2 =＆gt;我尝试了0.97,0.98，结果相同
webpack 3.10.0
反应16.2.0 =＆gt;我尝试使用15.xx版本并得到了相同的结果
react-materialize 1.1.1

在我的layout我根据文档导入图标

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="preload" as="style" onload="this.rel='stylesheet'">

目前显示的是alarm_off或之类的图标名称，因为我尝试了两种输入法

Answer 1

在阅读了很多关于GitHub的博客和问题后，我设法通过this Google issue解决了这个问题，所以我在style.scss

中添加了这个问题

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: local("Material Icons"),
       local("MaterialIcons-Regular"),
       url(https://rawgit.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2) format("woff2"),
       url(https://rawgit.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff) format("woff"),
       url(https://rawgit.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.ttf) format("truetype");
}

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  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";
}

另外，我在nginx

中对此进行了更新

  location ~* \.(?:eot|otf|ttc|ttf|woff|woff2)$ {
  expires 1M;
  add_header Access-Control-Allow-Origin "*";
  add_header Cache-Control "public";

希望这有助于其他有类似问题的人。

材料图标无法通过React-materialize

使用的包

1 个答案: