Vue Element使用icon图标教程详解(第三方)
作者:方丈先生 发布时间:2023-07-02 16:28:43
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图标教程详解网站的支持!
来源:https://www.jianshu.com/p/59dd28f0b9c9
猜你喜欢
- 调用Windows API锁定计算机本来想用Python32直接调用,可是没有发现Python32有Windows API LockWork
- 1、简介Burp Suite是用于攻击web应用程序的集成平台。它包含了许多工具,并为这些工具设计了许多接口,以促进加快攻击应用程序的过程。
- 1.首先需要安装pandas, 安装的时候可能由依赖的包需要安装,根据运行时候的提示,缺少哪个库,就pip 安装哪个库。2.示例代码impo
- 本文实例讲述了Python实现字符串逆序输出功能。分享给大家供大家参考,具体如下:1、有时候我们可能想让字符串倒序输出,下面给出几种方法方法
- 分为服务端和客户端,要求可以有多个客户端同时操作。客户端可以查看服务器文件库中有什么文件。客户端可以从文件库中下载文件到本地。客户端可以上传
- 一次性选中并修改多个相同的变量在编码的时候,有时候要批量替换一个变量的名字,但是又不想使用批量替换,因为在不同的作用域中是可以使用相同的变量
- python具体强大的库文件,很多功能都有相应的库文件,所以很有必要进行学习一下,其中有一个ftp相应的库文件ftplib,我们只需要其中的
- 看代码,再做解释<?php $array=array('a','b','c','
- 本文实例讲述了python回溯法实现数组全排列输出的方法。分享给大家供大家参考。具体分析如下:全排列解释:从n个不同元素中任取m(m≤n)个
- 简单构建一个项目,如下是mian.go文件package main// 条件编译-构建标签-如何使用IDE编译和识别func main()
- 如果直接在命令行中利用input和raw_input读入一个文件来处理,并且想要采用直接将文件拖入命令行来处理的方式,input方法可以直接
- substr(string,start,length)参数:1,string 即你要截取的字符串2,start 即要截取的开始位置(0表示从
- Microsoft SQL Server 7.0安全问题Microsoft Corporation【「Microsoft SQL Serve
- 本文实例形式较为详细的讲述了Python socket编程。分享给大家供大家参考。具体如下:sock=socket.socket(socke
- 本文实例讲述了Go语言实现AzDG可逆加密算法。分享给大家供大家参考。具体实现方法如下:package mainimport (
- key: [com.alibaba.druid.stat.DruidDataSourceStatManager.addDataSource(
- 本文实例为大家分享了Django下完成文件上传和下载功能的具体代码,供大家参考,具体内容如下一、文件上传Views.pydef upload
- 读写 JSON 数据问题你想读写 JSON(JavaScript Object Notation) 编码格式的数据。解决方案json模块提供
- 参考的一些文章以及论文我都会给大家分享出来 —— 链接就贴在原文,论文我上传到资源中去,大家可以免费下载学习,如果当天资源区找不到论文,那就
- 字符编码,在编程中,是一个让学习者比较郁闷的东西,比如一个str,如果都是英文,好说多了。但恰恰不是如此,中文是我们不得不用的。所以,哪怕是