materialize icons 本地布署方法

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>