在 museUI 中使用 material icon

发表于 | 分类于 | 评论数： | 阅读次数：

museUI是基于 Vue 2.0 优雅的 Material Design UI 组件库,同时也是为数不多的支持移动端的 material 风格 ui 框架,在使用的时候发现,如果要使用 museUI 的 icon,需要从 CDN 上引入字体图标库:

1
2
3
4
<link
  rel="stylesheet"
  href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css"
/>

但是我大天朝自有国情在,外部 cdn 很有可能无法访问,因此我们需要把这些 icon 都保存到本地.

下面是方法 👇:

1.下载图标字体文件

点击下面的链接下载图标的字体文件:

https://fonts.gstatic.com/s/materialicons/v28/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

保存到 @/assets 下.

2.设置字体

在 assets文件夹下新建 material-icon.css文件,并添加如下内容(注意文件的名称已经修改为icon.woff2 且和 material-icon.css 同级):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;

  src: local("Material Icons"), local("MaterialIcons-Regular"),
    url(icon.woff2) format("woff2");
}

.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";
}

3.在 main.js 中引入

1
2

import "./assets/css/material-icons.css";

效果:

thank u !