uniapp开发使用uni-icons添加自定义图标
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 文件中补充自定义的文件即可。
更多推荐
已为社区贡献1条内容
所有评论(0)