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

时间:2021-09-18 09:35:58

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图标(第三方)
 

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

Vue Element使用icon图标(第三方)的更多相关文章

  1. Vue Element 使用 icon 图标 &lpar;第三方&rpar;

    Vue Element 使用 icon 图标 (第三方) element-ui 自带的图标库还是不够全, 还是需要需要引入第三方 icon, 自己在用的时候一直有些问题, 参考了些教程, 详细地记录补 ...

  2. Vue如何引入icon图标

             1.下载icon图标,推荐icomoon网站,里面有大量的矢量图标,也可以自定义,当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标.点击进入icomoon网站点击右上角“IcoM ...

  3. vue项目中icon图标的完美引入

    第一步: 进入阿里矢量图标库并登录 地址:https://www.iconfont.cn 第二步: 选择项目需要的图标添加到库 第三步: 选完之后点击右上角的购物车,打开后点击添加到项目,没有就自己建 ...

  4. VUE设置浏览器icon图标

    一.将[logo.png]格式图片转换为[logo.bmp]格式 ps打开图片- 存储为 BMP格式 保存好的[logo.bmp] 格式的图片重命名为[logo.ico] 二.将[logo.ico]图 ...

  5. Vue Element使用第三库icon图标

    一:引入单设图标 1.打开 阿里icon,注册 >登录>图标管理>我的项目 2.新建项目 返回阿里icon首页,点进去你想要的icon库,因为没有批量导入购物车,所以一般情况下需要一 ...

  6. 循序渐进VUE&plus;Element 前端应用开发&lpar;11)--- 图标的维护和使用

    在VUE+Element 前端应用中,图标是必不可少点缀界面的元素,因此整合一些常用的图标是非常必要的,还好Element界面组件里面提供了很多常见的图标,不过数量不是很多,应该是300个左右吧,因此 ...

  7. 循序渐进VUE&plus;Element 前端应用开发&lpar;8)--- 树列表组件的使用

    在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...

  8. 循序渐进VUE&plus;Element 前端应用开发&lpar;26)--- 各种界面组件的使用(2)

    在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...

  9. 新书上线:《Spring Boot&plus;Spring Cloud&plus;Vue&plus;Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

随机推荐

  1. Bootstap datetimepicker报错TypeError&colon; intermediate value

    Bootstrap datetimepicker有多个版本,官方的链接中,只是datepicker,没有时间的选择,原版的datetimepicker也不再更新,不能用新版的jquery.现在http ...

  2. Foreach遍历

    前天在项目中遇到一个问题,foreach遍历过程中修改responses中的对象,其中responses的类型:IEnumerable<Order>,代码如下: foreach (Orde ...

  3. 2012年 蓝桥杯预赛 java 本科 题目

    2012年 蓝桥杯预赛 java 本科 考生须知: l  考试时间为4小时. l  参赛选手切勿修改机器自动生成的[考生文件夹]的名称或删除任何自动生成的文件或目录,否则会干扰考试系统正确采集您的解答 ...

  4. poj3468 splay(成段跟新 区间求和)

    用splay做了一遍. 建树时是按照数列序号从小到大排好的,每个节点左子树的序号小于右子树的序号及这个节点本身.由于查询[l,r]要伸展l-1,r+1所以我们要多加2个结点,保证边界处理时不出问题.由 ...

  5. 鸟哥的linux私房菜学习笔记 &lowbar;&lowbar; 命令与文件的搜寻

    连续输入两次[tab]按键就能够知道使用者有多少命令可以下达.那你知不知道这些命令的完整档名放在哪里?举例来说,ls 这个常用的命令放在哪里呢? 就透过 which 或 type 来找寻吧! 范例一: ...

  6. 合并两个有序数组a和b到c

    问题:两个有序数组a和b,合并成一个有序数组c. // 合并两个有序数组a和b到c void Merge_Array(int a[], int n, int b[], int m, int c[]) ...

  7. dp、sp 转换为 px 的工具类

    public class DisplayUtil { /** * 将px值转换为dip或dp值,保证尺寸大小不变 * * @param pxValue (DisplayMetrics类中属性densi ...

  8. mysql基本操作 &lbrack;http&colon;&sol;&sol;www&period;cnblogs&period;com&sol;ggjucheng&sol;archive&sol;2012&sol;11&sol;03&sol;2752082&period;html&rsqb;

    创建表 简单的方式 CREATE TABLE person ( number INT(11), name VARCHAR(255), birthday DATE ); 或者是 CREATE TABLE ...

  9. TextView的几个属性

    1. android:autoLink 自动识别文本中包含的链接,如网址.邮箱.电话.地图等:属性值有如下几种: web------------ ------只识别网址 email---------- ...

  10. typeof操作符 返回值

    Type操作符 返回值 : 1undefined   这个未定义 2.boolean    这个为boolean类型 3.string      这个是字符串 4.number    这个就是数值 5 ...