element 中使用自定义图片icon图标

这篇具有很好参考价值的文章主要介绍了element 中使用自定义图片icon图标。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

修改Element UI自带的icon,替换成自己的图片:

定义一个类名,icon使用类名:

.el-icon-类名 {
    background: url('你的图片路径') center center no-repeat;
    background-size: 24px;
}

如:文章来源地址https://www.toymoban.com/news/detail-738775.html

 .el-icon-date {
      background: url('../../../assets/icon/icon-date.png') center center no-repeat;
      background-size: 16px;
 }

 .el-icon-price {
      background: url('../../../assets/icon/icon-price.png') center center no-repeat;
      background-size: 16px;
 }

 .el-icon-arrow {
      background: url('../../../assets/icon/icon-arrow.png') center center no-repeat;
      background-size: 16px;
 }
<el-form-item class="formSelect" label="建议销售价">
    <el-col :span="11">
        <el-input placeholder="最低价" v-model="searchInfo.minSellPrice"
         suffix-icon="el-icon-arrow">
        </el-input>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
        <el-input placeholder="最高价" v-model="searchInfo.maxSellPrice"
          suffix-icon="el-icon-price">
        </el-input>
    </el-col>
</el-form-item>

到了这里,关于element 中使用自定义图片icon图标的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于vue3+版本引入element-ui使用icon问题 (icon不显示问题)vue3中input里面不显示icon图标

    1)、引入  2)、效果: 出来了一个大图标  3)、代码 1)、引入  2)、效果:  3)、代码

    2024年02月16日
    浏览(54)
  • el-tree自定义图标,使用图片或者dom自定义图标,element-plus

    el-tree自定义左侧的图标,有很多方法 第一种:通过css类获取到el-tree-node__expand-icon图表类,然后通过设置类名,修改css样式来改变图标。 第二种:通过js直接将el-tree-node__expand-icon元素移除,直接替换掉DOM。 以上两种都是比较刻板的方法,第一种适用于element-ui。 第三种:el

    2024年02月14日
    浏览(53)
  • vue3+elementPlus:前端自定义el-tree图标icon

    重点:template蒙版下svg和use,然后前端遍历添加key和value,取判断放图标 HTML结构:el-tree里面包裹template(关键点) 方法一:使用for循环 for循环数据,前端自定义tree图标第一种方法,后端key没有icon字段,自己添加 方法二: 使用map遍历 直接map遍历前端自定义tree图标 作者上一

    2024年02月15日
    浏览(46)
  • 从零开始Vue3+Element Plus的后台管理系统(五)——尝试多种图标ICON方案iconify

    iconfont是过去使用较多的图标方案,后来更倾向于使用SVG,因为SVG更灵活兼容性更好。在最近的几个Vue2项目中,因为强调功能弱化设计所以直接用Element UI自带的图标即可满足需求。 Element Plus的图标库相对Element UI更加丰富,然而对于喜欢折腾的人还是远远不够的,在我折腾的

    2024年02月04日
    浏览(42)
  • element icon图标用法

    1.基础用法:  2.直接使用 SVG 图标 3.下载成PNG使用                  

    2024年04月09日
    浏览(44)
  • Element Plus Icon图标自动引入

    安装Icon 图标   自动导入 首先你需要安装 unplugin-icons 和 unplugin-auto-import 这两款插件 修改配置文件 按需引入后发现 https://www.yyyi1.cn/detail?id=63e65183982003a0a19bbe23

    2024年02月12日
    浏览(32)
  • Vue 3使用 Iconify 作为图标库与图标离线加载的方法、 Icones 开源在线图标浏览库的使用

    之前一直naive-ui搭配使用的是xicons,后来发现Iconify支持的图标合集更多,因此转而使用Iconify。 与FontAwesome不同的是,Iconify配合Icones相当于是一个合集,Iconify提供了快捷引入图标的方式,而Icones是一个大的图标库,收集了大量MIT协议、Apache 2.0开源的图标文件。 Iconify 支持的框

    2024年02月08日
    浏览(44)
  • element-plus 动态Icon图标

    目录 1,前言 2,使用 2.1,方式一 2.2,方式二 源自 Element Plus 团队正在将原有组件内的 Font Icon 向 SVG Icon 迁移,请多多留意更新日志, 及时获取到更新信息,Font Icon 将会在第一个正式发布被废弃,请尽快迁移 在此记录一下如何使用element-plus中的icon组件 环境: Vue:3.2.16 Elem

    2024年02月16日
    浏览(43)
  • element-ui更改图标icon大小

    element-ui改变icon大小 在template里面加入div 再在style样式中 这就相当于给块组件赋予了形状大小的属性。

    2024年02月11日
    浏览(43)
  • Vue 3使用 Iconify 作为图标库与图标离线加载的方法、 Icones 开源在线图标浏览库的使用_iconify 图标库

    与FontAwesome不同的是,Iconify配合Icones相当于是一个合集,Iconify提供了快捷引入图标的方式,而Icones是一个大的图标库,收集了大量MIT协议、Apache 2.0开源的图标文件。 Iconify 支持的框架很多,本文以 Vue 3 作为介绍。 官网地址: https://icones.js.org/ Iconify Design: All popular icon sets,

    2024年04月27日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包