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";
    }
相关推荐
前端开发爱好者8 分钟前
VSCode 推出 绿色版!更强!更智能!
前端·javascript·visual studio code
VX:Fegn089510 分钟前
计算机毕业设计|基于springboot + vue图书商城系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
吃好喝好玩好睡好11 分钟前
Flutter与Electron在OpenHarmony生态的融合实践:构建下一代跨平台应用
javascript·flutter·electron
一个小小开发44 分钟前
在大型项目中为什么更推荐Composition API?它解决了哪些工程化问题?
vue.js
四眼肥鱼1 小时前
全网最全的 qiankun 基于 react18+(主应用)、vue3.4+(微应用)实现页签缓存,页面缓存
前端·javascript
老前端的功夫1 小时前
前端水印技术深度解析:从基础实现到防破解方案
开发语言·前端·javascript·前端框架
www_stdio1 小时前
手写 instanceof:深入理解 JavaScript 原型与继承机制
前端·javascript·html
醒了接着睡1 小时前
Vue中的watch
vue.js
狗哥哥1 小时前
我是如何治理一个混乱的 Pinia 状态管理系统的
前端·vue.js·架构
一 乐2 小时前
物业管理|基于SprinBoot+vue的智慧物业管理系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot