vue+element ui中的el-button自定义icon图标

实现

button的icon属性自定义一个图标名称,这个自定义的图标名称会默认添加到button下i标签的class上,我们只需要设置i标签的样式就可以了


##3. 按钮上使用自定义的icon

完整代码

html 复制代码
  <div class="lookBtn">
            <el-button icon="el-icon-my-message" size="mini" type="primary" 
                   @click="checkAllTask">
                查看任务
           </el-button>
  </div>

样式代码

css 复制代码
    ::v-deep .el-icon-my-message {
        background: url('../../assets/images/lookMsg.png') center no-repeat;
        width: 21px;
        height: 26px;
    }

    ::v-deep .el-icon-my-message:before {
        content: "替";
        font-size: 20px;
        visibility: hidden;
    }

    ::v-deep .el-icon-my-message {
        font-size: 16px;
    }

    ::v-deep .el-icon-my-message:before {
        content: "\e611";
    }
相关推荐
前端 贾公子13 小时前
Vue3 业务组件库按需加载的实现原理(中)
前端·javascript·vue.js
温轻舟13 小时前
前端可视化大屏【附源码】
前端·javascript·css·html·可视化·可视化大屏·温轻舟
熊猫钓鱼>_>13 小时前
【开源鸿蒙跨平台开发先锋训练营】Day 12:全场景适配与异常防护——构建高可靠的鸿蒙跨端体验
react native·ui·华为·开源·app·harmonyos·鸿蒙
Jing_Rainbow13 小时前
【React-9/Lesson93(2025-12-30)】React Hooks 深度解析:从基础到实战🎯
前端·javascript·react.js
web打印社区13 小时前
web-print-pdf:专为Web打印而生的专业解决方案
前端·javascript·vue.js·electron·html
m5655bj13 小时前
通过 Python 删除 Excel 中的空白行列
python·ui·excel
午安~婉14 小时前
构图跟拍相关
前端·javascript·拍照·虚拟列表
前端程序猿i14 小时前
流式输出场景下的「双区域渲染」:让第三方 DOM 操作在 Vue 响应式更新中存活
前端·javascript·vue.js
css趣多多14 小时前
setup() 函数与语法糖
前端·javascript·vue.js
前端程序猿i14 小时前
第 3 篇:消息气泡组件 —— 远比你想的复杂
开发语言·前端·javascript·vue.js