Vue Element使用icon图标(第三方)

Posted azhqiang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue Element使用icon图标(第三方)相关的知识,希望对你有一定的参考价值。

element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下

对于我们来说,首选的当然是阿里icon库

教程:

1.打开阿里icon,注册 >登录>图标管理>我的项目

 

 
技术图片
图标管理>我的项目,点进去

新建项目

 

 
技术图片
新建项目

项目名称随便写。前缀注意,不要跟element-ui自带的icon(前缀为:el-icon)重名了。

设置完,点新建

 
技术图片
注意前缀。设置完,点新建

现在我们返回阿里icon首页,点进去你想要的icon库,因为没有批量导入购物车,所以一般情况下需要一个一个去点,太浪费时间,那么请在控制台输入以下代码,批量导入

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);

 
技术图片
然后点击回车,他会把这套图库所有icon加入购物车

点页面上的购物车

 
技术图片
页面右边的购物车图标,点击

把图标都添加到刚才创建的项目里

 
技术图片
添加

设置fontClass,然后下载到本地

 

 
技术图片
下载到本地,解压

解压后你会得到这些文件,打开图中圈中的文件

将以下代码加进去,注意:el-icon-third是你之前设置的icon前缀,第二个el-icon-third前边有空格的

[class^="el-icon-third"], [class*=" el-icon-third"]/*这里有空格*/

{ font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale; }        

 
技术图片
绿框的数据保持一致就好

2.上边设置好以后,打开vue项目,我是在src-assets下创建了icon文件夹,将所有的文件复制了过来

在main.js里边把css引进来

 

 
技术图片
记得引进来

然后重新npm run dev 一下

3.打开在阿里icon的项目,复制你想要的图标代码

 

 
技术图片
图标代码:el-icon-ump-qianniudaidise

使用,两种引用方式,跟element自带的使用方法一样

 

 
技术图片
 

最后效果:

 

 
技术图片
 

转自:https://www.jianshu.com/p/59dd28f0b9c9

以上是关于Vue Element使用icon图标(第三方)的主要内容,如果未能解决你的问题,请参考以下文章

前端学习(3028):vue+element今日头条管理-使用icon图标的处理

vue3.x结合element-plus如何使用icon图标

vue怎么将ui设计的图标导入

Element-Ui组件Icon 图标

Element-Ui组件Icon 图标

Vue3使用element-ui input组件给字体图标绑定点击事件