muiapp开发07：自定义图标

目录

1 字体下载与解读

1.1 下载字体

1.2 字体文件解读

2 使用图标

---

使用阿里巴巴图标库提供的图标就行测试

1 字体下载与解读

1.1 下载字体

1 选择自己心仪的图标，加入购物车

2 点击购物车，查看自己选择的图标是否全部存在，之后点击 【下载源码】按钮

3 解压下载的文件

1.2 字体文件解读

我们重点关注三个文件：

• iconfont.css：字体的样式表文件
• iconfont.ttf：字体文件
• iconfont.json：记录的是所有字体的名称信息

 以我们选择的图标为例，其对应的 iconfont.json 文件内容如下：

{
  "id": "",
  "name": "",
  "font_family": "iconfont",
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
    {
      "icon_id": "4686546",
      "name": "保存",
      "font_class": "baocun",
      "unicode": "ec09",
      "unicode_decimal": 60425
    },
    {
      "icon_id": "5387745",
      "name": "保存_o",
      "font_class": "baocun_o",
      "unicode": "eb47",
      "unicode_decimal": 60231
    }
  ]
}

我们在引用具体的图标时，用到的就是 font_class 键 对应的值。

2 使用图标

第一步：将解压包中的 iconfont.css 和 iconfont.ttf 分别拷贝到mui-app项目的 css目录 和 fonts目录下：

第二步：修改iconfont.css文件，重点关注以下内容：

• @font-face 中的 url 修改为项目路径
• font-size：修改为文字或其他图标相匹配的大小

 第三步：在页面上引用css文件

<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>

第四步：使用自定义的图标，使用格式为：

• iconfont + iconfont.json中的你想使用图标的 font_class 键 对应的值

<a class="mui-navigate-right iconfont icon-baocun_o" href="#"> 备份</a>