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";
    }
相关推荐
前端那点事24 分钟前
彻底解决KeepAlive缓存乱象!Vue3精细化按需缓存+路径重置终极方案
前端·vue.js
前端那点事25 分钟前
Vue 的 template 标签不能用 v-show?底层机制+踩坑复盘+生产级解决方案
前端·vue.js
测试员周周27 分钟前
【Appium 系列】第12节-智能路由 — API测试 vs UI 测试的自动选择
开发语言·人工智能·python·功能测试·ui·appium·测试用例
前端那点事28 分钟前
从零落地前端性能优化:全链路避坑+实战调优方案
前端·vue.js
2401_865439631 小时前
CSS中隐藏元素的多重技巧与应用场景
开发语言·前端·javascript
烛衔溟1 小时前
TypeScript 中的类基础
javascript·ubuntu·typescript
Momo__2 小时前
Vue3 v-memo:长列表渲染的性能核武器
前端·vue.js
mCell2 小时前
从云相册的缩略图说起:Bun.Image 让我告别 sharp
javascript·图片资源·bun
BU摆烂会噶2 小时前
【LangGraph】节点内调用与状态隔离
android·人工智能·python·ui·langchain·人机交互
努力努力再努力wz2 小时前
【C++高阶数据结构系列】:时间轮定时器详解:原理分析与代码实现,带你从零手撕时间轮!(附时间轮的实现源码)
c语言·开发语言·数据结构·c++·qt·算法·ui