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

 更新时间:2018年02月07日 13:35:11   作者:方丈先生  
element-ui自带的图标库不够全,还是需要需要引入第三方icon。下面小编给大家带来了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自带的使用方法一样

 

最后效果:

 

总结

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

相关文章

  • Vue3实现地图选点组件的示例代码

    Vue3实现地图选点组件的示例代码

    这篇文章主要为大家详细介绍了Vue3实现地图选点组件的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • 详解vue中axios请求的封装

    详解vue中axios请求的封装

    这篇文章主要介绍了vue中axios请求的封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue+Element-ui实现分页效果实例代码详解

    vue+Element-ui实现分页效果实例代码详解

    这篇文章主要介绍了vue+Element-ui实现分页效果 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • vue 实现 rem 布局或vw 布局的方法

    vue 实现 rem 布局或vw 布局的方法

    这篇文章主要介绍了vue 实现 rem 布局的 或者 vw 布局的方法,本文给提供多种方法,需要的朋友可以参考下
    2019-11-11
  • Vue echarts封装组件需求分析与实现

    Vue echarts封装组件需求分析与实现

    在平常的项目中,echarts图表我们也是使用的非常多的,通常我们从后端拿到数据,需要在图表上动态的进行呈现,接下来我们就模拟从后端获取数据然后进行呈现的方法,这篇文章主要介绍了Vue echarts封装组件需求分析与实现
    2022-10-10
  • Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作

    Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作

    这篇文章主要介绍了Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue配置proxy代理接口报错2007 bad domain的解决

    Vue配置proxy代理接口报错2007 bad domain的解决

    本文主要介绍了Vue配置proxy代理接口报错2007 bad domain的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • vue+webpack 打包文件 404 页面空白的解决方法

    vue+webpack 打包文件 404 页面空白的解决方法

    下面小编就为大家分享一篇vue+webpack 打包文件 404 页面空白的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue element ui使用选择器实现地区选择两种方法

    vue element ui使用选择器实现地区选择两种方法

    这篇文章主要给大家介绍了关于vue element ui使用选择器实现地区选择的两种方法,Element UI是一套基于Vue.js开发的UI组件库,其中包含了地区选择器(Cascader)组件,需要的朋友可以参考下
    2023-09-09
  • vue操作下拉选择器获取选择的数据的id方法

    vue操作下拉选择器获取选择的数据的id方法

    今天小编就为大家分享一篇vue操作下拉选择器获取选择的数据的id方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论