Saber增加自定义iconfont图标

96
小狐狸
2019-09-06 12:49 字数 1642 阅读 44评论 0

总感觉图标太少了,写篇文章来记录下增加iconfont图标,首先放出效果图:

首先在iconfont上挑选好自己要添加的图标添加到一个项目

批量添加iconfont图标到购物车代码:

var iconList = document.querySelectorAll('.icon-gouwuche1'); 
for (var i = 0; i < iconList.length; i++) { 
    iconList[i].click(); 
}

在图标库页面打开调试,然后在控制台上输入上面的代码执行,会发现整个图标库的图标都添加到购物车了,然后可以从购物车添加到一个项目,如图:

其中红框标注的是我们需要的,在Saber项目的src/config/env.js文件中添加上图红框标注的内容,添加完如下图:

添加完成之后先提取图标库的所有图标名称

在iconfont项目图标列表界面,也就是上面截图的那个界面打开控制台输入:

var obj = document.getElementsByClassName("icon-code icon-code-show");
var list = new Array();
for (var i = 0; i < obj.length; i++) {
  list[i] = obj[i].innerText;
}
console.log(JSON.stringify(list));

然后就能打印所有图标名称了,复制图标名称数组字符串到记事本工具,然后执行替换

搜索: "icon-  替换为 "iconfont icon-

然后在搜索 ",    替换为 ",\n

然后得到结果如下图:

然后在Saber项目的src/config/iconList.js文件里添加图标列表,如下图:


OK,iconfont图标添加完毕,刷新后看看效果吧

Saber
登录 后发表评论
0条评论
还没有人评论过~