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
猜你喜欢
- DDPDistributed Data Parallel 简称 DDP,是 PyTorch 框架下一种适用于单机多卡、多机多卡任务的数据并行
- 一、Slice数据结构是什么?切片(slice)是 Golang 中一种比较特殊的数据结构,这种数据结构更便于使用和管理数据集合。切片是围绕
- 一、获取安装包:Pycharm 官网 下载页面 :点击打开Anconda 官网 下载页面 :点击打开选择对应的系统和需要的版本进行下载,py
- 索引类型聚簇索引: 叶子节点存储的是行记录,每个表必须要有至少一个聚簇索引。使用聚簇索引查询会很快,因为可以直接定位到行记录普通索引:二级索
- (一)前言众所周知,Navicat是我们常用的连接MYSQL工具,非常方便好用。其实日常中,我们也常常会遇到运行时间很长甚至几乎跑不完卡死的
- 通过XSL转换XML文件 最近,我喜欢上了XML编程,但又苦于它的美观程度又不够,找了许多书才搞定。用XML好是蛮好,但它还是不太适合做显示
- 关于在asp中不使用组件使得脚本sleep的办法还比较少见,可能比较好的办法是创建同步的xmlhttp request,直到获得的时间达到某
- Exec 是 os 包中的一个子包,它可用于使用 Go 运行外部命令。Go exec 命令教程展示了如何在 Golang 中执行 shell
- 第一次写这类文章,有点儿紧张有点儿新奇有点儿痛苦,来CDC实习2个月啦,每天除了工作就是体验体验再体验,因为之前做了一些有关规范的工作,突然
- JS添加/删除事件在IE和支持dom浏览器分别为:attachEvent(ie中的添加事件),detachEvent(ie中的删除事件),a
- 问题分析为了提高系统的吞吐量,很多环节下对于数据库的写入是多线程,甚至是多进程的。为了保证写入成功,在很多情况下需要多次重试。这就会带来一个
- 在图像裁剪操作中,opencv和pillow两个库都具有相应的函数,但是这两个库中的函数仅仅能对与图片平行的矩形进行裁剪操作,如果想要对目标
- 1.什么是接口接口就是一种规范与标准,在生活中经常见接口,例如:笔记本电脑的USB接口,可以将任何厂商生产的鼠标与键盘,与电脑进行链接。为什
- 本文实例讲述了Python实现手写一个类似django的web框架。分享给大家供大家参考,具体如下:用与django相似结构写一个web框架
- python解释器运行代码的流程启动python解释器(相当于文本编辑器)打开文件,显示这个字符并检查语法(涉及字符编码, a=1只是一个很
- 前言Django中的中间件是一个轻量级、底层的插件系统,可以介入Django的请求和响应处理过程,修改Django的输入或输出。中间件的设计
- 决策树是一种将数据集通过分割成小的、易于处理的子集来进行分类或回归的算法。其中每个节点代表一个用于划分数据的特征,每个叶子节点代表一个类别或
- 导语:近年来,全世界都纷纷投身网络热潮。从小企业到大公司,再到网络学校和大学,大家都在努力提升自己的网络影响力,这样既免费为自身品牌做广告,
- 有时,希望除去某些记录或更改它们的内容。DELETE 和 UPDATE 语句令我们能做到这一点。用update修改记录UPDATE tbl_
- i前端:nput_test.html<!DOCTYPE html><html><head lang="