materialize css 官网
参考网址 应用在 materialize icons 亲测可行,方法如下:
Step 1)找到下面网址内容并粘贴到您网页的 style
中
https://fonts.googleapis.com/icon?family=Material+Icons
<style type="text/css">
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v98/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}
.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;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
</style>
Step 2) 下载 url 中的字体并保存在您的服务器上
https://fonts.gstatic.com/s/materialicons/v98/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2
Step 3) 修改 src:url
内容为您服务器可以访问到的字体文件位置即可
src: url(../../static/level/font/matirialize.woff2) format('woff2');
}
Step 4) 刷新网页,在浏览器调试窗口中查看网络选项,确认字体图标文件已经被加载。
Step 5) 使用测试:在网页 body 中写下面的代码,查看效果。
<i class="material-icons">add</i>