element使用自定义icon图标的两种解决方式
作者:小坚果_ 发布时间:2023-07-02 16:55:05
写项目时,发现 element 里的图标没有我需要的图标,
两种情况:
① 简单的替换小图标,没有选中变色等要求
② 有选中变色等要求,稍微复杂的需求
第一种情况解决办法:
修改Element UI自带的小图标,替换成自己的
首先找到那个自带的图标class,然后代码如下
.el-icon-sunrise {
background: url('你的图片路径') center center no-repeat;
background-size: 24px;
}
.el-icon-sunrise:before {
content: "11";
visibility: hidden;
}
第二种情况解决办法:
这就需要去阿里巴巴图标矢量库找到需要的图标了
阿里巴巴图标矢量库 : https://www.iconfont.cn/collections/index
如果没有登录,请先登录(我一般用微博登录),如果没有注册,按着 步骤注册就可以了,登录完成就可以走下边的步骤
第一步:选中你需要的图标,点击添加购物车,添加之后再点击上边的购物车,步骤如下图所示
第二步:在第一步点击上边的购物车之后,弹出下面的页面,点击添加至项目
第三步:在第二步点击 添加至项目 之后,如下图所示,如果有项目直接点击确定就可以,如果没项目 ,点击图上显示的地方
第四步:在第三步点击之后,如下图所示
第五步:在上边点击确定之后弹出如下界面
第六步:按下图操作
第七步:点击项目中设置之后弹出 如下界面
第八步:对内容稍作修改,如下图所示
1、将 FontClass/Symbol 前缀 修改 el-icon-
2、将 Font Family 是 element-icons
修改完如下图所示
第九步:点击保存,就会跳到下图所示的界面,点击下载至本地
第十步:下载完成后会是一个压缩包 解压至你要用此图标的项目文件夹
文件夹里面是这样,等会需要引入iconfont.css
下一步:需要在main.js中引入此文件夹中的iconfont.css,(路径写你文件夹所在的路径)
最后:需要在 iconfont 中选中Font class 然后复制这个图标名进行使用,如下图所示操作
在项目中需要的地方粘贴上就可以了
完成啦
来源:https://blog.csdn.net/m0_61702149/article/details/125640116
猜你喜欢
- 前言在很多网站中,基本上的都会有一个开头和一个结尾,在每一个网页中都会显示。相对于这种的来说,在Django中,最好的方法就是使用inclu
- 一、AnacondaAnaconda(水蟒)是一个捆绑了Python、conda、其他相关依赖包的一个软件。包含了180多个可学计算包及其依
- 本文实例解析Python SqlAlchemy的使用方法,分享给大家供大家参考,具体内容如下1.初始化连接from sqlalchemy i
- 本文实例为大家分享了python实现石头剪刀布的具体代码,供大家参考,具体内容如下老师布置了一个石头剪刀布的作业,要可视化,还是先用代码实现
- 简介集合对象 set 是由具有唯一性的可哈希对象组成的无序多项集,如 list 不能哈希因此,不能作为 set 的一项。set 的常见用途包
- 本文为大家分享了python搭建服务器实现两个Android客户端间收发消息,供大家参考,具体内容如下python服务器# coding:u
- 本文实例讲述了Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能。分享给大家供大家参考,具体如下:因为需要使用
- 一、浪漫玫瑰花实现代码:from turtle import *import timesetup(1000,800,0,0)speed(0)
- 本文实例讲述了Python排序搜索基本算法之选择排序。分享给大家供大家参考,具体如下:选择排序就是第n次把序列中最小的元素排在第n的位置上,
- 一、os常用方法1.获取当前路径 os.getcwd()# coding:utf-8import osif __name__ == '
- Appium是移动端的自动化测试工具,类似于前面所说的Selenium,利用它可以驱动Android、iOS等设备完成自动化测试,比如模拟点
- 日志日志是跟踪软件运行时所发生的事件的一种方法。软件开发者在代码中调用日志函数,表明发生了特定的事件。事件由描述性消息描述,该描述性消息可以
- 本文实例为大家分享了Tensorflow之MNIST CNN实现并保存、加载模型的具体代码,供大家参考,具体内容如下废话不说,直接上代码#
- 对表误删或执行缺少条件的修改 SQL 导致修改了表内其他数据时,我们需要想办法将数据恢复回来。先创建两个测试表 table_1CREATE
- 主题的修改:File -> Settings ,弹出的窗口中: Appearance & Behavior -> App
- 本文实例为大家分享了python绘制温度变化雷达图的具体代码,供大家参考,具体内容如下假设某天某地每三个小时取样的气温为针对温度变化趋势绘制
- 本文实例讲述了Django返回json数据用法。分享给大家供大家参考,具体如下:1、前端。jQuery发送GET请求,并解析json数据。g
- 语法:replace(self, to_replace=None, value=None, inplace=False, limit=Non
- 今天实习公司分配了一个数据处理的任务。在将列表中的字符串连接成一个长路径时,我遇到了如下问题:import ospath_list = [&
- 有过Web经验的人喜欢使用:<meta http-equiv="refresh" content="1;