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";
    }
相关推荐
天蓝色的鱼鱼37 分钟前
画1万个图形就卡成PPT?试试这款国产高性能2D引擎
前端·javascript
小拉达不是臭老鼠39 分钟前
Unity中的UI系统之UGUI
学习·ui·unity
wuxia211840 分钟前
用Node.js为网站首页绑定数据
javascript·node.js
云水一下1 小时前
JavaScript 从零基础到精通系列:异步编程与网络请求
前端·javascript
এ慕ོ冬℘゜2 小时前
手写生产级 jQuery Toast 轻量提示组件|零插件依赖、动画流畅、极简高
前端·javascript·jquery
大家的林语冰3 小时前
Express 团队官宣:全新网站正式上线,Logo 重做,支持两个主版本文档无缝切换!
javascript·node.js·express
时寒的笔记3 小时前
LF11期_day19~20 补环境(二)入门案例
javascript
爱吃提升3 小时前
Figma 组件库搭建清单(含命名规范+常用组件模板)
前端·javascript·figma
右耳朵猫AI3 小时前
JavaScript技术周刊 2026年第20周
开发语言·javascript·ecmascript
Cobyte3 小时前
15.响应式系统比对:链表在 Preact Signals 响应式系统中的应用
前端·javascript·vue.js