字体图标

iconfont 介绍

iconfont 是一种字体图标。本项目中所用的 iconfont 是阿里的 iconfont-阿里巴巴矢量图标库 (opens new window)。
官方使用教程 (opens new window)

目录结构

└─ static
   └─ iconfont          # 字体文件

注意

下载字体前，需在 项目设置 勾选 WOFF、TTF、Base64 三种字体格式，下载字体为 Font class 形式，将下载后的 .css 文件改为 .wxss，在 app.wxss 中引入该样式文件。

优点

• 图标数量众多，对于不会设计的前端很友好；
• 字体图标一次加载，相比图片可减少网络请求；
• 字体为矢量图，放大不会失真；
• 文件体积小；
• 平台兼容性较好。

缺点

• 每次新增时需要重新下载替换字体文件

使用

<!-- xxx 为图标名称 -->
<text class="iconfont icon-xxx"></text>

<!-- 全局组件 -->
<c-icon name="xxx" />