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";
    }
相关推荐
云枫晖1 天前
JS核心知识-this的指向
前端·javascript
前端人类学1 天前
现代贪吃蛇游戏的进化:从经典玩法到多人在线体验
javascript·css
前端康师傅1 天前
JavaScript 函数高级用法
前端·javascript
计算机毕业设计指导1 天前
基于Spring Boot + Vue 3的社区养老系统设计与实现
vue.js·spring boot·后端
前端Hardy1 天前
惊艳同事的 Canvas 事件流程图,这篇教会你
前端·javascript·css
神仙别闹1 天前
基于 Vue+SQLite3开发吉他谱推荐网站
前端·vue.js·sqlite
华仔啊1 天前
别再被 Stream.toMap() 劝退了!3 个真实避坑案例,建议收藏
javascript·后端
华仔啊1 天前
别再写 TypeScript enum了!新枚举方式让 bundle 瞬间小20%
javascript·typescript
方安乐1 天前
vite+vue+js项目使用ts报错
前端·javascript·vue.js
韩立23331 天前
Vue 3.5 升级指南
前端·vue.js