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";
    }
相关推荐
在西安放羊的牛油果16 分钟前
浅谈 import.meta.env 和 process.env 的区别
前端·vue.js·node.js
王林不想说话33 分钟前
提升工作效率的Utils
前端·javascript·typescript
weixin_584121431 小时前
vue内i18n国际化移动端引入及使用
前端·javascript·vue.js
imkaifan1 小时前
bind函数--修改this指向,返回一个函数
开发语言·前端·javascript·bind函数
xkxnq1 小时前
第一阶段:Vue 基础入门(第 7 天)
前端·javascript·vue.js
光头闪亮亮1 小时前
企业协同办公系统(OA)-【图标选择器】模块开发详解
前端·javascript·vue.js
pas1361 小时前
22-mini-vue props
前端·javascript·vue.js
pas1361 小时前
23-mini-vue 实现 emit 功能
前端·javascript·vue.js
黛色正浓1 小时前
leetCode-热题100-子串合集(JavaScript)
javascript·算法·leetcode
程序员Agions2 小时前
React 自定义 Hooks 生存指南:7 个让你少加班的"偷懒"神器
前端·javascript