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";
    }
相关推荐
MZWeiei38 分钟前
MVVM 模式,以及 Angular、React、Vue 和 jQuery 的区别与关系
vue.js·react.js·angular.js
前端 贾公子44 分钟前
《Vuejs设计与实现》第 8 章(挂载与更新)
开发语言·前端·javascript
述雾学java1 小时前
Spring Boot + Vue 前后端分离项目解决跨域问题详解
vue.js·spring boot·后端
半碗水1 小时前
缝缝补补
前端·javascript
用户2519162427111 小时前
ES6之类的其他书写方式
javascript·ecmascript 6
空城机1 小时前
从零打造前沿Web聊天室:消息系统
前端·vue.js
燕燕燕燕燕1 小时前
vue2基础-vue基础知识和原理
vue.js
用户3802258598241 小时前
vue中结合vue3-sfc-loader加载远程组件
vue.js
咔咔库奇2 小时前
axios取消请求
开发语言·前端·javascript
Jinxiansen02112 小时前
Nuxt + Pinia + Element Plus 后台管理系统搭建教程(含源码)
前端·javascript·vue.js