文档章节

Vue Element使用icon图标(第三方)

 果树啊
发布于 2018/12/07 10:50
字数 655
阅读 96
收藏 0

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自带的使用方法一样

 

最后效果:

 

不管你懂了没有,反正我是懂了



作者:方丈先生
链接:https://www.jianshu.com/p/59dd28f0b9c9
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

本文转载自:https://www.jianshu.com/p/59dd28f0b9c9

共有 人打赏支持
粉丝 11
博文 227
码字总数 52707
作品 0
福州
高级程序员
私信 提问
vue-manage-system 后台管理系统开发总结

前言 vue-manage-system,一个基于 Vue.js 和 element-ui 的后台管理系统模板,从2016年年底第一个commit,到现在差不多两年了,GitHub上也有了 5k star,也是这些让我有了持续更新的动力,其...

linshuai
2018/09/13
0
0
Avue 1.0 发布了,像 easyUI 一样写 vue

vue1.0发布了,像easyUI一样写vue 欢迎点击演示地址体验 演示地址:http://122.4.205.228:7777——jenkins+docker+git钩子自动部署 码云地址:https://gitee.com/smallweigit/avue github地址:...

avue_smallwei
2018/03/15
11.8K
25
前端与移动开发之vue-day6(4)

App.vue 组件的基本设置 头部的固定导航栏使用 Mint-UI 的 Header 组件; 底部的页签使用 mui 的 tabbar; 购物车的图标,使用 icons-extra 中的 mui-icon-extra mui-icon-extra-cart,同时,...

czbkzmj
2018/11/21
0
0
vue-element-admin v3.0.0 发布,后台集成方案

vue-element-admin v3.0.0 已发布,这是一个重大升级版本。vue-element-admin 是基于 vue+element 的后台集成方案。 更新内容: 路由 规范了路由配置,统一使用将配置放入 meta 之中。 keep...

王练
2017/12/05
5.7K
6
Avue 是一个后台集成解决方案支持SSR(服务端渲染)和SPA(单例页面),

https://gitee.com/smallweigit/avue.git vue只是刚起步,很多功能还在开发中敬请期待...... 简体中文 欢迎加入QQ交流群,互相学习 一键加群: 简介 是一个后台集成解决方案支持SSR(服务端渲...

Smallwei小伟
2018/02/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

100行Python代码理解深度学习关键概念:从头构建恶性肿瘤检测网络

在构建乳腺癌预测神经网络过程中,我们主要分为3大部分: 1.用Python从零开始创建一个神经网络,并使用梯度下降算法训练模型。 2.在该神经网络中使用威斯康星乳腺癌数据集,根据9种不同的特征...

阿里云官方博客
22分钟前
0
0
数据库表结构查询SQL

今天给大家送上两个SQL查询的方法,也许在项目中你都用过,但是,没关系,仅仅记录下,以便后面不用去查找。针对与经常写SQL的同行来说,应该是非常简单的。 查询表结构数据 SELECTt.COLU...

摘星族
26分钟前
1
0
Maven常用命令

NAME       mvn - software project management and comprehension toolDESCRIPTION       usage: mvn [options] [<goal(s)>] [<phase(s)>]OPTIONS       -am,--a......

吴伟祥
28分钟前
1
0
在Centos7中安装mysql 5.6的一些注意点

在Centos7中安装mysql 5.6的一些注意点 2018年04月08日 11:45:11 去看日出 阅读数:408 在Centos7中安装mysql 5.6的一些注意点 2015/07/18 | 数据库 | shenyi| 4 条评论 | 19733 views 1、C...

rootliu
34分钟前
3
0
关于360插件化Replugin 2.3.1版本的AS配置解决方案

编译错误:No signature of method: com.android.build.gradle.internal.scope.VariantScopeImpl.getMergeAssetsTask() is applicable for argument types: () values: [] 解决方案:加入热心......

Gemini-Lin
54分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部