【ElementUI组件优化】自定义icon图标的使用

2023-11-06

风雨里做个大人,阳光下做个小孩。

        前端经常会用到UI提供的各种图表,推荐阿里的图标库。如果UI要求不是很严格,我们可以自己在图标库中找到想要的图标。 搜索之后可以点击下载。

        在ElementUI中使用Icon图标组件使用非常简单

同时,在图标按钮中也会用到。


定义自己的图标

1.下载保存自己的图标

2.写样式(重点)

给图标命名为el-icon-my-people,并添加一下样式,不加scoped,完成一个图标的创建

<style lang="scss">
//不要定义 scoped
.el-icon-my-people {
  background: url("../../assets/images/order/icon1.png") center no-repeat;
  font-size: 16px;
  background-size: cover;
}
.el-icon-my-people:before {
  content: "替";
  font-size: 16px;
  visibility: hidden;
}
</style>

 3. 使用

图标的使用就和ElementUI中的icon使用是一样的。按钮的使用也可以直接使用图标名称。

<i class="el-icon-my-people"></i>
<i class="el-icon-my-fast"></i>
<i class="el-icon-my-sure"></i>

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【ElementUI组件优化】自定义icon图标的使用 的相关文章

随机推荐

  • Kotlin 系统入门到进阶

    目录 前言 Kotlin学习资料 关于Kotlin 你应该学 Kotlin 吗 Android 必备技能 最有可能接替Java的语言 Kotlin 你为什么需要 Kotlin 为什么我要改用Kotlin 如何看待 Kotlin 成为 And
  • 会议OA项目之会议发布(多功能下拉框的详解)

    Welcome Huihui s Code World 接下来看看由辉辉所写的关于OA项目的相关操作吧 目录 Welcome Huihui s Code World 一 主要功能点介绍 二 效果展示 三 前端代码 jsp js 四 后端代码
  • DNS解析与CDN加速

    DNS解析与CDN加速 一 DNS解析 1 域名系统DNS 2 DNS解析 二 CDN加速 1 什么是CDN 2 静态加速 3 动态加速 一 DNS解析 1 域名系统DNS 域名系统的前世今生 域名系统的产生的原因是用户通过形如198 26
  • Web自动化测试流程:从入门到精通,帮你成为测试专家!

    摘要 Web应用程序在今天的软件开发中占据着越来越重要的地位 保证Web应用程序的质量和稳定性是非常必要的 而自动化测试是一种有效的方法 本文将介绍Web自动化测试流程 并提供代码示例 步骤一 选取测试工具 选择适合自己团队的自动化测试工具
  • Linux下安装Mysql5.7,超详细完整教程,以及云mysql连接

    安装前环境检查 1 首先检查自己电脑有没有安装过mysql 输入如下 rpm qa grep mysql 如果有则清理干净在安装 输入 whereis mysql 找到文件夹目录 再把它删除 rpm e nodeps mysql xxxx
  • 华为手机微信与电脑连接到服务器失败怎么办,华为微信到电脑上找不到了怎么办...

    1 华为手机连接电脑后找不到微信保存的视频 应该是在微信专用的文件夹里 文件夹的名字是英文的腾信 如果视频不多可以登陆电脑版微信 然后用文件助手传到电脑再保存 2 华为荣耀10微信存储图片连接电脑找不到 查找微信保存图片的文件信息 打开 文
  • React组件化一

    29 9React课程 第02节 react组件化 第2节 02课react组件化 02课react组件化 02课react组件化 初始化显示constructor构造函数 要使用super 否则没法在内部使用this 2与3之间要对组件进
  • Centos7本地yum安装FTP和HTTP服务

    Centos镜像包下载 http mirror centos org altarch 7 isos 32位 i386 64位 带64的 1 将Vmware中的光驱设置为镜像包 在虚拟机关闭时设置 1 打开虚拟机设置 2 选择CD DVD 3
  • clang简介

    文章目录 clang编译器 clang选项 阶段选择选项 语言选择和模式选项 目标选择选项 代码生成选项 O0 O1 O2 O3 Ofast Os Oz Og O O4 g gline tables only gmodules fstand
  • 适用于 24 V 电源系统的车载网络 ESD 保护

    Nexperia 安世半导体 近日推出符合 AEC Q101 标准的产品组合 其中包含六个 ESD 保护器件 PESD2CANFD36XX Q 旨在保护 LIN CAN CAN FD FlexRay 和SENT 等车载网络 IVN 中的总线
  • 日期补0位

    function getNowFormatDate var day new Date var Year 0 var Month 0 var Day 0 var CurrentDate 初始化时间 Year day getYear 有火狐下2
  • Red Hat Enterprise Linux 8 配置yum源

    Red Hat Enterprise Linux 8 配置YUM源的两种方式 一 本地YUM源 1 备份源文件 cd etc yum repos d mkdir bak mv repo bak 2 挂载镜像 mount t iso9660
  • 面试官都在问

    面试官都在问 Linux命令mpstat详解 1 mpstat的基本用法 mpstat的全称为Multiprocessor Statistics 是一款常用的多核CPU性能分析工具 用来实时查询每个CPU的性能指标 以及所有CPU的平均指标
  • 用qsetting实现文件保存和读取

    QSettings 是 Qt 库中的一个类 可以用来读取和保存应用程序的配置数据 使用 QSettings 可以方便地保存和读取配置信息 比如窗口的大小和位置 最近打开的文件列表等 实现保存文件的步骤如下 创建 QSettings 对象 并
  • OpenCV 3.3.1及Contrib附加库安装教程及问题Undefined reference to cv::xfeatures2d

    INSTALL OPENCV ON UBUNTU OR DEBIAN 1 KEEP UBUNTU OR DEBIAN UP TO DATE sudo apt get y update sudo apt get y upgrade sudo
  • cpp课程设计实验题:编写程序,定义抽象基类Shape(形状),由它派生出3个派生类: Circle(圆形)、Rectangle(矩形)和Square 正方形),用函数函数ShowArea()分别显

    编写程序 定义抽象基类Shape 形状 由它派生出3个派生类 Circle 圆形 Rectangle 矩形 和Square 正方形 用函数函数ShowArea 分别显示各种图形的面积 最后还要显示所有图形的总面积 要求用基类指针数组 使它的
  • adb 指令

    1 基本指令 指令 adb version 显示 adb 版本 指令 adb help 帮助信息 查看 adb 所支持的所有命令 指令 adb start server 启动 adb 服务 指令 adb kill server 关闭 adb
  • Unity 分帧加载和分块加载

    分帧加载和分块加载 在我们实际做项目的时候 往往会遇见需要创建大量数据的时候 这时如果在一帧里面大量创建数据 那我们的游戏就会发生卡顿从而降低了用户的体验 为了解决这种情况 可以使用使用分帧加载使得每帧只加载固定数量的数据来解决 也可以使用
  • 经纬度坐标与距离的相互转换及其实现

    经纬度坐标与距离的相互转换 1 经纬度与距离角度的换算关系 2 Python代码实现 1 经纬度与距离角度的换算关系 a 在纬度相等的情况下 经度每隔0 00001度 距离相差约1米 每隔0 0001度 距离相差约10米 每隔0 001度
  • 【ElementUI组件优化】自定义icon图标的使用

    风雨里做个大人 阳光下做个小孩 前端经常会用到UI提供的各种图表 推荐阿里的图标库 如果UI要求不是很严格 我们可以自己在图标库中找到想要的图标 搜索之后可以点击下载 在ElementUI中使用Icon图标组件使用非常简单 同时 在图标按钮