uni-app项目给uni-icons增加字体图标（编辑ttf文件）

你的名字 2023-06-05 08:15 2阅读 0赞

## 背景 ##

uni-app项目开发发现图标不够用，想直接在现有的图标中增加新的图标。网上大多是讲如何引入iconfont的字体，而非直接把字体添加到uni-icons中。

## 实现原理 ##

字体文件的本质是，unicode作为索引的字体矢量图库。我们需要在图库中增加新的图片，然后通过矢量图的索引来使用字体图标。

## 实现步骤 ##

### 3.1 下载uni-icons的ttf字体图标文件 ###

我们需要编辑ttf文件，所以需要先下载这个文件。这里参考我的上一遍博客，把base64文件编码转化文ttf文件。  
https://blog.csdn.net/kouryoushine/article/details/102393171  
![在这里插入图片描述][20191008170738256.png]

### 3.2 准备新的字体图标文件（iconfont） ###

添加过程不详叙述，星星是我要添加的图标，下载到本地后，会看到一个ttf文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]

http://fontstore.baidu.com/static/editor/index.html\#

### 3.3 用百度字体平台合并两个ttf文件 ###

导入uni-icons的ttf文件后，看到所有uni-app的图标库已经被保存。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 1]  
导入从iconfont下载的ttf文件。导入后可以看到新的图标和编码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 2]

### 3.4 导入字体 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 3]  
点击导出ttf就会生成新的字体文件

## 引入新的字体文件 ##

参考我上面给出的博客连接把ttf转换为base64文件,把uni-icons.vue中的font-face替换掉  
![在这里插入图片描述][20191008173117547.png]  
替换后相当于现在uni-app项目中的字体文件包含了新的图标。我们只需引入图标的索引位置即可  
在uni-icons.vue中添加新的图标的名称和索引编号。  
注：名称是自定义的uni-icon-xxxx ，索引编号在百度字体图标上选择“预览”可以看到。

.uni-icon-ccstar:before {
    	content: '\e69d';
    }

## 使用新的图标 ##

其实到此位置，新的星星图标已经存在于uni-icons库中,可以像普通图标一样使用。这里我修改了uni-rate的星星样式。效果如下，新的图标星星更加圆润。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 4]

## 结语 ##

过程并不精细到每一步，主要是提供解决问题的思路。看起来复杂，其实熟练后可以几分钟内完成新图标的导入，有问题可以留言。

[20191008170738256.png]: /images/20230601/afcebb272de94b2cb4786310e7dc5d8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]: /images/20230601/11be169fef3e41428bb14e6650112165.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 1]: /images/20230601/cb88fb79f17f4ef0ada497b22d8e26ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 2]: /images/20230601/74a95055100342de87a4d468d2d524f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 3]: /images/20230601/b816e311cbf84384a010b92d5b36c83d.png
[20191008173117547.png]: /images/20230601/eef80e02185c482b9c56c58ec913095a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 4]: /images/20230601/1c668b78fa7e4cb6b91c1e10c62b709c.png