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


Posted in Javascript onFebruary 07, 2018

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图标教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
如何提高Dom访问速度
Jan 05 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
Vue.set()实现数据动态响应的方法
Feb 07 #Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 #Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 #Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 #Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 #Javascript
详解JS数值Number类型
Feb 07 #Javascript
vue几个常用跨域处理方式介绍
Feb 07 #Javascript
You might like
3.从实例开始
2006/10/09 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
JS 判断代码全收集
2009/04/28 Javascript
JavaScript 继承详解(一)
2009/07/13 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python 文件读写操作实例详解
2014/03/12 Python
Python版微信红包分配算法
2015/05/04 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
python实现linux下抓包并存库功能
2018/07/18 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
财务部会计岗位职责
2015/02/03 职场文书
销售合作意向书范本
2015/05/08 职场文书
冰雪公主观后感
2015/06/16 职场文书
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS