CSS Material Design 图标未显示在浏览器中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34880289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Material Design Icons not showing in browser
提问by absolutevibe
I'm trying to host the Google Material Design icon set for my website however I cannot get the icons to show in Chrome or Safari.
我正在尝试为我的网站托管 Google Material Design 图标集，但是我无法在 Chrome 或 Safari 中显示这些图标。
I'm using this CSS file:
我正在使用这个 CSS 文件：
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(/public/dist/font/Material-Design-Icons.eot); /* For IE6-8 */
src: url(/public/dist/font/Material-Design-Icons.woff2) format('woff2'),
url(/public/dist/font/Material-Design-Icons.woff) format('woff'),
url(/public/dist/font/Material-Design-Icons.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
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';
}
Pulling in the file with:
拉入文件：
link(rel="stylesheet", href="/public/dist/css/font.css")
Which I can see in the browser is loaded
我可以在浏览器中看到已加载
The font itself is even loaded into the page, I can see the .woff file in the network tab on Chrome.
字体本身甚至已加载到页面中，我可以在 Chrome 的网络选项卡中看到 .woff 文件。
This is the publicfolder structure which is hosted 'as is' by the server
这是public服务器“按原样”托管的文件夹结构
I'm using the font here (jade):
我在这里使用字体（玉）：
i.material-icons.prefix perm_identity
And I can see the CSS class above applied to that element
我可以看到上面应用到该元素的 CSS 类
But the fonts don't render.
但字体不呈现。
EDIT: People here having the same issue: https://github.com/google/material-design-icons/issues/205
编辑：这里的人有同样的问题：https: //github.com/google/material-design-icons/issues/205
回答by absolutevibe
This was caused by outdated icon fonts on the materializecss.com website, I used the ones off the Google GH repo and they worked sigh
这是由 materializecss.com 网站上过时的图标字体引起的，我使用了 Google GH 存储库中的字体，他们叹了口气
回答by Jayant Nayak
Simply make use of google material design icons directly in your webpage. You can find the details here https://google.github.io/material-design-icons/I was able to fix this issue by using the google web font style sheet. It is much easier this way.. you can just include the style sheets in you webpage and all web font icon classes are loaded and you are good to go.
只需直接在您的网页中使用谷歌材料设计图标即可。您可以在此处找到详细信息 https://google.github.io/material-design-icons/我能够通过使用 google 网络字体样式表解决此问题。这种方式更容易..您可以在网页中包含样式表，并且所有网络字体图标类都已加载，您就可以开始了。
