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 小时前
「九九八十一难」组合式函数到底有什么用?
前端·vue.js
前端Hardy8 小时前
面试官:JS数组的常用方法有哪些?这篇总结让你面试稳了!
javascript·面试
yuki_uix8 小时前
Props、Context、EventBus、状态管理:组件通信方案选择指南
前端·javascript·react.js
全栈老石8 小时前
手写无限画布4 —— 从视觉图元到元数据对象
前端·javascript·canvas
用户11489669441058 小时前
VUE3响应式原理——从零解析
vue.js
用户83040713057019 小时前
SPA 首屏加载速度慢怎么解决?
vue.js·webpack
一枚前端小姐姐9 小时前
低代码平台表单设计系统技术分析(实战三)
前端·vue.js·低代码
SuperEugene9 小时前
从 Vue2 到 Vue3:语法差异与迁移时最容易懵的点
前端·vue.js·面试
Leon10 小时前
新手引导 intro.js 的使用
前端·javascript·vue.js
Forever7_10 小时前
仅用一个技巧,让 JavaScript 性能提速 500%!
前端·vue.js