说明:用图标的方式,是防止开发过程中因为设置图标大小导致图标变模糊,也方便更改颜色
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 文件中补充自定义的文件即可。

在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐