element-ui图标不够用,引用阿里云图标使用icon图标(
2019-07-19 本文已影响0人
嫑着急
element-ui自带的图标库还是不够全,还是需要需要引入第三方icon
记录一下,不会的 直接按照图片操作吧,简单粗暴哈哈
![](https://img.haomeiwen.com/i16532219/f7f9dd5e76c1bdfd.png)
![](https://img.haomeiwen.com/i16532219/f08b45993560cec9.png)
![](https://img.haomeiwen.com/i16532219/fbf7b42779436c8f.png)
![](https://img.haomeiwen.com/i16532219/0bdeeb729f47c9f3.png)
这里可以挑选图标到购物车,最后在添加至项目
一般情况下需要一个一个去点,太浪费时间,那么请在控制台输入以下代码,批量导入
var icons = document.querySelectorAll('.icon-gouwuche1');
var auto_click = function(i) {
if (i < icons.length) {
setTimeout(function() {
icons.item(i).click();
auto_click(i + 1);
},
600);
}
};
auto_click(0);
![](https://img.haomeiwen.com/i16532219/2fcafbbf159bc66d.png)
![](https://img.haomeiwen.com/i16532219/3fc807fd08efcc9f.png)
下载到本地打开 iconfont.css
![](https://img.haomeiwen.com/i16532219/6e11733ccd11c164.png)
[class^="icon-al"],
[class*="icon-al"]
{
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
![](https://img.haomeiwen.com/i16532219/80fa08900dc21c2f.png)
main.js 引入 css 图标库
![](https://img.haomeiwen.com/i16532219/2054faf1668f2bac.png)
复制的代码,跟element一样,icon="icon-al-shangjia" class="icon-al-shangjia"
最后我们重启项目 cnpm run dev
咱们一起共同进步
![](https://img.haomeiwen.com/i16532219/fdffc4d76a957988.gif)