美文网首页
element-ui图标不够用,引用阿里云图标使用icon图标(

element-ui图标不够用,引用阿里云图标使用icon图标(

作者: 嫑着急 | 来源:发表于2019-07-19 15:43 被阅读0次

element-ui自带的图标库还是不够全,还是需要需要引入第三方icon

记录一下,不会的 直接按照图片操作吧,简单粗暴哈哈

1.png 2.png 3.png 4.1.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);
4.png 5.png

下载到本地打开 iconfont.css

7.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;
}
8.png

main.js 引入 css 图标库

9.png

复制的代码,跟element一样,icon="icon-al-shangjia" class="icon-al-shangjia"

最后我们重启项目 cnpm run dev

咱们一起共同进步

3713575-0f74c2d4c493db00.gif

相关文章

网友评论

      本文标题:element-ui图标不够用,引用阿里云图标使用icon图标(

      本文链接:https://www.haomeiwen.com/subject/rmcslctx.html