本文主要介绍uni-app如何添加
自定义字体图标
一、使用uni-icons增加自定义图标
1.1 准备图标
这里我使用的是阿里图标库，找到项目所需图标后，下载下来备用（可以是svg、ttf、img等等）
1.2 合并图标
- ① 使用ttf编辑器打开
uni-modules/uni-icons/components/uni-icons/uni.ttf文件
图1-1 ttf编辑器
图1-2 导入成功
图1-3 设置图标编码
图1-4 下载ttf
-
② uni.ttf转base64，base64在线转换工具
图1-5 base64转换 ③ 去除base64换行
这里使用的vscode编辑器：
图1-6 去除换行符
- ④ 替换
uni-icons.vue文件中原有的base64字符串
图1-7 替换base64
-
⑤ 补充
icons.js
图1-8 补充图标编码 -
⑥ 使用
图1-9 使用
以上是直接在uni-icons中添加，但小程序限制代码体积，所以不建议直接在uni-icons中添加，建议只引入所需图标。
二、只引入所需图标
1.1 准备图标
- 建议开发前期准备时，先汇总项目所需图标，然后一次性引入；
- 使用ttf编辑器结合
uni-icons提供的图标和阿里图标，汇总出项目所需图标，然后下载下来，命名为iconfont.ttf。 - 如果选择这种方法，可以直接
删除uni-icons组件包。
图2-1 准备图标
图2-2 下载zip包
1.2 引入
-
① 在
static下创建iconfont目录
图2-3 创建iconfont目录 -
②
iconfont.css
将压缩包了的icon.css复制到iconfont.css中，并修改字体库名称
图2-4 iconfont.css ③
iconfont.ttf
将压缩包了的iconfont.ttf复制到iconfont中;-
④ 引入
在App.vue中引入iconfont.css
图2-5 引入 -
⑤ 使用
注意名称前要加iconfont icon-*
图2-6 使用
