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";
    }
相关推荐
麦麦大数据2 小时前
D038 vue+django西游记问答知识图谱可视化系统
vue.js·django·问答系统·知识图谱·neo4j·可视化·可是还
浩星4 小时前
react的框架UmiJs(五米)
前端·javascript·react.js
将编程培养成爱好6 小时前
C++ 设计模式《外卖骑手状态系统》
c++·ui·设计模式·状态模式
Niyy_6 小时前
前端一个工程构建多个项目,记录一次工程搭建
前端·javascript
快乐非自愿8 小时前
常用设计模式:工厂方法模式
javascript·设计模式·工厂方法模式
岁月宁静8 小时前
AI 多模态全栈应用项目描述
前端·vue.js·node.js
十年磨一剑~8 小时前
html+js开发一个测试工具
javascript·css·html
汪汪队立大功1239 小时前
JavaScript是怎么和html元素关联起来的?
开发语言·javascript·html
han_10 小时前
前端高频面试题之Vuex篇
前端·vue.js·面试
天天向上102410 小时前
VueUse的使用
前端·vue.js·vscode