uni-app项目给uni-icons增加扩充自己所需要的字体图标(编辑ttf文件)

40 篇文章 2 订阅
15 篇文章 0 订阅

实现步骤
1.下载uni-icons的ttf字体图标文件(原生项目创建后是没有的,需要去官方模板实例中找,直接复制也可以)
我们需要编辑ttf文件,所以需要先下载这个文件。
https://blog.csdn.net/kouryoushine/article/details/102393171


2. 准备新的字体图标文件(iconfont)

阐述下步骤吧,怕新手不会(在其中搜索图标,然后添加入购物车,确定后添加入项目就可以了,没有项目就自己建一个)


在这款编辑器中进行添加删除图标
http://fontstore.baidu.com/static/editor/index.html#

3. 用百度字体平台合并两个ttf文件
导入uni-icons的ttf文件后,看到所有uni-app的图标库已经被保存。

导入从iconfont下载的ttf文件。导入后可以看到新的图标和编码。


3. 导入字体

4.点击导出ttf就会生成新的字体文件

5.将ttf转换为base64

在线转码,按照默认来就行
https://www.motobit.com/util/base64-decoder-encoder.asp

6.用word(或者其他工具)将回车符去掉,否则会读取失败

6.引入新的字体文件


ttf转换为base64文件并去掉回车符后,把uni-icons.vue中的font-face替换掉

替换后相当于现在uni-app项目中的字体文件包含了新的图标。我们只需引入图标的索引位置即可
在uni-icons.vue中添加新的图标的名称和索引编号。
注:名称是自定义的uni-icon-xxxx ,索引编号在百度字体图标上选择“预览”可以看到。

方法借鉴与:https://blog.csdn.net/kouryoushine/article/details/102396601

但是按照他的方法折腾了一晚上也不管用,突然灵光乍现,去掉了回车符,然后就对了……

作为官方图标的补充,这个版本比较丰富

https://ext.dcloud.net.cn/plugin?id=846

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值