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";
    }
相关推荐
利刃大大26 分钟前
【Vue】组件生命周期 && 组件生命周期钩子
前端·javascript·vue.js·前端框架
be or not to be3 小时前
JavaScript 对象与原型
开发语言·javascript·ecmascript
前端 贾公子3 小时前
Git优雅使用:git tag操作
javascript·github
她超甜i4 小时前
css省略号展示,兼容性强,js判断几行,不需要定位
javascript·css·vue.js
Mr Xu_5 小时前
深入分析Element UI Tree组件在本地与生产环境样式差异问题
css·ui·elementui
雨季6665 小时前
构建 OpenHarmony 简易单位换算器:用基础运算实现可靠转换
flutter·ui·自动化·dart
前端 贾公子6 小时前
release-it 使用指南
前端·javascript
Y_037 小时前
SpringBoot+VUE3的图书管理系统
vue.js·spring boot·毕业设计·数据可视化
摘星编程8 小时前
React Native + OpenHarmony:Modal确认取消弹窗
javascript·react native·react.js