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";
    }
相关推荐
风止何安啊23 分钟前
从 “牵线木偶” 到 “独立个体”:JS 拷贝的爱恨情仇(浅拷贝 VS 深拷贝)
前端·javascript·面试
漫天黄叶远飞25 分钟前
地址与地基:在 JavaScript 的堆栈迷宫里,重新理解“复制”的哲学
前端·javascript·面试
小书包酱28 分钟前
告别在 vue 中使用公共 less 文件没有提示信息的烦恼
css·vue.js·less
ohyeah30 分钟前
深入理解 JavaScript 中的继承与 instanceof 原理
前端·javascript
crary,记忆32 分钟前
React 之 useEffect
前端·javascript·学习·react.js
小飞侠在吗42 分钟前
vue OptionsAPI与CompositionAPI
前端·javascript·vue.js
春卷同学1 小时前
基于Electron开发的跨平台鸿蒙PC找不同游戏应用
javascript·游戏·electron
JIngJaneIL1 小时前
基于Java民宿管理系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot
春卷同学1 小时前
钓鱼大师 - Electron for 鸿蒙PC项目实战案例
javascript·electron·harmonyos
脾气有点小暴1 小时前
Tree Shaking 深度解析:原理、应用与实践
前端·vue.js