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 相关文章推荐
javascript 验证日期的函数
Mar 18 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
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
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP实现的简单日历类
2014/11/29 PHP
php实现求相对时间函数
2015/06/15 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
IE iframe的onload方法分析小结
2010/01/07 Javascript
xml转json的js代码
2012/08/28 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
python爬取网易云音乐评论
2018/11/16 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
python通过链接抓取网站详解
2019/11/20 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
在C#中如何实现多态
2014/07/02 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
劳动实践课感言
2014/02/01 职场文书
热门专业求职信
2014/05/24 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
校长个人总结
2015/03/03 职场文书