uni-app添加自定义字体图标

本文主要介绍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 准备图标

1. 建议开发前期准备时，先汇总项目所需图标，然后一次性引入；
2. 使用ttf编辑器结合uni-icons提供的图标和阿里图标，汇总出项目所需图标，然后下载下来，命名为iconfont.ttf。
3. 如果选择这种方法，可以直接删除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 使用

相关链接

ttf编辑器
base64在线转换工具