【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图标的使用 的相关文章

  • 如何实现 JavaScript 对象被垃圾回收时触发的函数?

    实际上 垃圾被收集 销毁或以其他方式超出范围 我想要做的是 当调用了 bind 方法的对象被销毁时 取消绑定非 DOM 元素上的事件处理程序 编辑 我又查看了我的代码 并决定我真正需要它的唯一地方是当不再需要包含该对象的模块时 这通常发生在
  • 使用 parsley.js 支持每个字段多个自定义错误消息

    我正在尝试使用 parsley js 验证一个简单的表单 并且我对 parsley js 非常初学者 我想使用 window ParsleyValidator addValidator 方法在一个自定义验证方法中显示多个错误消息 所以我尝试
  • 当条件满足时如何打破CasperJS的重复功能?

    我想知道是否可以打破 casper repeat 循环 我有这个脚本可以做到这一点 在谷歌上搜索特工001 特工002 特工003 特工004 特工005 特工006 直到特工011 我希望它在找到文本 詹姆斯 邦德 后停止循环 现在它找到
  • 单击上一页的按钮路由到该页面后如何刷新页面

    我有 2 个页面 一个主页和一个页面 2 当我单击主页上的按钮时 它会路由到 page2 现在 单击主页上的按钮后 当我到达第 2 页时 它应该刷新 因为我的项目中存在一些缓存问题 我在ngoninit上添加了window location
  • 如何修复网站 iframe 错误?

    当我访问此网址时 警告 推荐使用一些广告拦截器 网页链接加载良好 没有错误 但是 当我尝试通过加载同一页面时iframe在我的html代码中 出现错误 我的html代码
  • 如何创建一个多重过滤函数来过滤掉多个属性?

    我有一个要过滤的对象数组 name Apple age 24 model Android status Under development name Roboto age 24 model Apple status Running 我需要使
  • React 不响应按键事件

    我正在尝试实现一些非常基本的按键检测 但我根本无法让它工作 我有一个裸露的组件 应该在onKeyDown事件 但控制台中没有任何内容被注销 class App extends React Component constructor prop
  • Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Headers

    我试图通过发布请求将文件发送到我的服务器 但是当它发送时会导致错误 Access Control Allow Headers 不允许请求标头字段 Content Type 所以我用谷歌搜索了错误并添加了标题 http post rootSc
  • 在 javascript 中访问 ajax POST 响应

    我正在从 javascript 函数发出 ajax POST 请求 function UpdateMetrics ajax type POST url MyHandler ashx Param1 value1 data contentTyp
  • JSON对象的长度[重复]

    这个问题在这里已经有答案了 该函数生成一个包含 json 对象的数组 var estoque function unpack estoque tnm total estoque vl id tid st tnm tnm split tota
  • Backbone 中的加载栏

    我想显示加载消息 图标 直到列表中的所有项目都已呈现 这是我的示例中的 jsfiddle http jsfiddle net 9R9zU 58 http jsfiddle net 9R9zU 58 我尝试在 Feed 部分添加一个带有加载栏
  • Vue 监听 Vuex 提交吗?

    有没有一种方法可以监听 Vuex 提交 而不观察任何随提交而更改的属性 只是简单地找出是否发生了提交 我有一个 Filter 组件 想将其放入 NPM 包中 但我已经有一个用例 在该用例中 我希望设置一个 cookie 在选择过滤器时存储过
  • 获取 JSON 中的 HTML 以在 React 组件中呈现为 HTML

    试图找出如何让链接实际呈现为链接 现在 在我从 Json 文件中读取这行文本后 React 将超链接渲染为文字文本 而不将其渲染为链接 一些数据 json about John has a blog you can read a href
  • 嵌套辅助函数和性能

    嵌套辅助函数对于使代码更易于理解非常有用 谷歌甚至建议在他们的应用程序中使用嵌套函数时尚指南 https google styleguide googlecode com svn trunk javascriptguide xml Nest
  • express 或express-generator:我需要两者吗?

    只是探索 Node js 并遇到了 Express 在 npm 存储库站点上https www npmjs com package express https www npmjs com package express它明确指出安装是 np
  • 如何检查 Map 或 Set 是否为空?

    对于 JavaScript 中的传统对象 使用以下命令很容易检查它是否为空 Object keys method const emptyObj console log Object keys emptyObj length 0 true i
  • 通过多个回调优雅地传递“点击事件”

    当未登录的用户单击给定的按钮时 我想停止该事件 收集他的 oauth 收集他的电子邮件 如果我没有 然后执行该事件 我想用 javascript 来做所有事情 因为这会让事情变得更加简单 这就是我执行它的方式 我有两个问题 有没有更优雅的方
  • 限制 jQuery id 字符串吗?

    简而言之 我的问题是字符串在 jQuery 中作为可搜索 id 或可搜索内容有什么限制 更新 我得到了 ID 部分 但不是为什么我什至无法使用该字符串搜索 html 内容 对于任何愿意告诉我一个正则表达式来将模式从 MM dd yy HH
  • 在角度控制器中监听文档事件

    如何捕获角度控制器中的事件 我有文档级事件 所以我需要在角度控制器中捕获事件 这可能吗 Update 我有独立的 js 文件来处理来自相机的一些操作 document addEventListener myCameraEvent handl
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2

随机推荐

  • 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图标组件使用非常简单 同时 在图标按钮