uniapp开发使用uni-icons添加自定义图标

说明:用图标的方式,是防止开发过程中因为设置图标大小导致图标变模糊,也方便更改颜色
1.找到组件uni-icons所在位置,将uniicons.ttf文件拷贝到桌面

在这里插入图片描述

2.打开 在线字体编辑器

选择字体文件导入,将刚才的 uniicons.ttf 文件导入进去,就会出现uni-icons原本的图标
在这里插入图片描述

3.到 阿里矢量图标库,找到你要添加的图标加入购物车,然后再添加至阿里矢量图标库的项目中

记得去点击编辑看下Unicode(16进制)码(红色箭头可以看到)是否与你原本项目的uni-icons组件的uniicons.css文件中的 content 代码有重复,如果有请更改至无重复的(本人使用从e700开始),
在这里插入图片描述

4.然后点击下载至本地,将解压出来的字体文件 iconfont.ttf ,重复上面2的步骤,然后在在线编辑器以ttf文件的形式下载下来,替换掉uni-icons原本的uniicons.ttf文件,最后去 uniicons.css 文件中补充自定义的文件即可。

在这里插入图片描述

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值