未加星标

Vue Element使用icon图标教程详解(第三方)

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

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

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

教程:

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

Vue Element使用icon图标教程详解(第三方)
 

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

新建项目

Vue Element使用icon图标教程详解(第三方)
 

新建项目

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

设置完,点新建

Vue Element使用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);
Vue Element使用icon图标教程详解(第三方)
 

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

点页面上的购物车

Vue Element使用icon图标教程详解(第三方)
 

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

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

Vue Element使用icon图标教程详解(第三方)
 

添加

设置fontClass,然后下载到本地

Vue Element使用icon图标教程详解(第三方)
 

下载到本地,解压

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

将以下代码加进去,注意: 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; }
Vue Element使用icon图标教程详解(第三方)
 

绿框的数据保持一致就好

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

在main.js里边把css引进来

Vue Element使用icon图标教程详解(第三方)
 

记得引进来

然后重新npm run dev 一下

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

Vue Element使用icon图标教程详解(第三方)
 

图标代码:el-icon-ump-qianniudaidise

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

Vue Element使用icon图标教程详解(第三方)
 
最后效果:
Vue Element使用icon图标教程详解(第三方)
 

总结

以上所述是小编给大家介绍的Vue Element使用icon图标教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!


您可能感兴趣的文章:Vue2.0+ElementUI实现表格翻页的实例vue 2.0项目中如何引入element-ui详解vue小图标favicon不显示的解决方案

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 阿里数据谢大
tags: icon,图标,el,font,element,third,click,gt,项目,vue,icons,ui,auto,前缀,教程
分页:12
转载请注明
本文标题:Vue Element使用icon图标教程详解(第三方)
本站链接:http://www.codesec.net/view/572467.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(11)