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";
    }
相关推荐
用户221520442780011 分钟前
vue3组件间的通讯方式
前端·vue.js
tyro曹仓舒37 分钟前
Vue单文件组件到底需不需要写name
前端·vue.js
Never_Satisfied1 小时前
在JavaScript / HTML中,line-height是一个CSS属性
javascript·css·html
用户916357440951 小时前
LeetCode热题100——15.三数之和
javascript·算法
skykun1 小时前
都2026年了还在说闭包吗?
javascript
饮水机战神1 小时前
小程序被下架后,我连夜加了个 "安全接口"
前端·javascript
閞杺哋笨小孩2 小时前
Vue3 点击指令(防抖 / 节流)
前端·vue.js
柯南二号2 小时前
【大前端】 TypeScript vs JavaScript:全面对比与实践指南
前端·javascript·typescript
岁月宁静2 小时前
AI 语音合成技术实践:实现文本转语音实时流式播放
前端·vue.js·node.js
閞杺哋笨小孩2 小时前
Vue3 可拖动指令(draggable)
前端·vue.js