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);
点页面上的购物车
把图标都添加到刚才创建的项目里
设置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的项目,复制你想要的图标代码
使用,两种引用方式,跟element自带的使用方法一样
最后效果:
转自:https://www.jianshu.com/p/59dd28f0b9c9
Vue Element使用icon图标(第三方)的更多相关文章
- Vue Element 使用 icon 图标 (第三方)
Vue Element 使用 icon 图标 (第三方) element-ui 自带的图标库还是不够全, 还是需要需要引入第三方 icon, 自己在用的时候一直有些问题, 参考了些教程, 详细地记录补 ...
- Vue如何引入icon图标
1.下载icon图标,推荐icomoon网站,里面有大量的矢量图标,也可以自定义,当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标.点击进入icomoon网站点击右上角“IcoM ...
- vue项目中icon图标的完美引入
第一步: 进入阿里矢量图标库并登录 地址:https://www.iconfont.cn 第二步: 选择项目需要的图标添加到库 第三步: 选完之后点击右上角的购物车,打开后点击添加到项目,没有就自己建 ...
- VUE设置浏览器icon图标
一.将[logo.png]格式图片转换为[logo.bmp]格式 ps打开图片- 存储为 BMP格式 保存好的[logo.bmp] 格式的图片重命名为[logo.ico] 二.将[logo.ico]图 ...
- Vue Element使用第三库icon图标
一:引入单设图标 1.打开 阿里icon,注册 >登录>图标管理>我的项目 2.新建项目 返回阿里icon首页,点进去你想要的icon库,因为没有批量导入购物车,所以一般情况下需要一 ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
- 循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用
在VUE+Element 前端应用中,图标是必不可少点缀界面的元素,因此整合一些常用的图标是非常必要的,还好Element界面组件里面提供了很多常见的图标,不过数量不是很多,应该是300个左右吧,因此 ...
- 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用
在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...
- 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)
在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...
随机推荐
- img 标签的 usemap 属性
<img src="1.gif" alt="Planets" usemap="#Map"/> <map name=&quo ...
- Python学习(三) —— 基本数据类型
基本数据类型 一.整数类型(int) 32位机器,整数的位数为32位,取值范围为-2**31~2**31-1,即-2147483648~2147483647 64位机器,整数的位数是64位,取值范围位 ...
- 51Nod1773 A国的贸易 多项式 FWT
原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1773.html 题目传送门 - 51Nod1773 题意 给定一个长度为 $2^n$ 的序列,第 $ ...
- BZOJ4036 [HAOI2015]按位或 FWT
原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ4036.html 题目传送门 - BZOJ4036 题意 刚开始你有一个数字 $0$ ,每一秒钟你会随机 ...
- 2017-2018-1 20179202《Linux内核原理与分析》第三周作业
一.mykernel 实验 : 1.深度理解函数调用堆栈: 上周已经一步步地分析过含有变量的函数调用时堆栈的变化,现在对堆栈框架进行一些补充,以以下程序为例: int main() { ... g(x ...
- ZOJ 3795 Grouping (强连通缩点+DP最长路)
<题目链接> 题目大意: n个人,m条关系,每条关系a >= b,说明a,b之间是可比较的,如果还有b >= c,则说明b,c之间,a,c之间都是可以比较的.问至少需要多少个集 ...
- docker eureka 注册中心 服务提供者通信机制
docker run -d --name gateway9527 -p 9527:9527 --add-host=eureka7001.com:192.168.1.15 -v /var/jen ...
- 附001.kubectl介绍及使用
一 kubectl介绍 1.1 kubectl概要 kubectl控制Kubernetes集群管理器,使用Kubernetes命令行工具kubectl在Kubernetes上部署和管理应用程序.使用k ...
- Linux学习笔记8
其他常用命令 cd+回车=回车~ 进入当前用户主目录 查看指定进程信息 #ps -ef |grep 进程名 #ps ---查看属于自己的进程 #ps -aux 查看所有用户的执行进程 换成 p ...
- java菜鸟之微信分享
前言:我终于理解了什么叫做教科书:教科书就是把一些简单容易的知识写成一堆谁都看不懂的书,这,就简称“教科书” 这些天接触到微信分享以及回调的问题,因为之前没接触过,所以这次做这个分享,碰了一点点壁,特 ...