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 相关文章推荐
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
vue--vuex详解
Apr 15 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
JS实现吸顶特效
Jan 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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
php变量作用域的深入解析
2013/06/03 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
javascript RadioButtonList获取选中值
2009/04/09 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
使用python开发vim插件及心得分享
2014/11/04 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
python实现井字棋游戏
2020/03/30 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
2014的自我评价
2014/01/13 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
项目工作说明书
2014/07/29 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
退税申请报告怎么写
2015/05/18 职场文书