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";
    }
相关推荐
森叶3 分钟前
Electron 实战:用 utilityProcess 开子进程,去端口化承载协议处理,并由主进程拦截渲染请求后统一中转
前端·javascript·electron
ZC跨境爬虫1 小时前
前端实战复盘:从零完成Apple中国大陆官网UI第一阶段全量静态复刻
前端·css·ui·html
Hilaku2 小时前
做了 6 年前端,技术不差却拿不到 Offer?
前端·javascript·程序员
a1117762 小时前
RIPPLE 流体交互(html 开源)
前端·javascript·html
薛定猫AI2 小时前
【深度解析】Qwen 3.6 Max Preview:面向智能体编码、视觉推理与 Three.js 前端生成的能力拆解
开发语言·前端·javascript
Moment2 小时前
AI 时代,为什么全栈项目越来越离不开 Monorepo 和 TypeScript
前端·javascript·后端
wuyoula2 小时前
尹之盾企业版网络验证
服务器·开发语言·javascript·c++·人工智能·ui·c#
Via_Neo2 小时前
区间dp算法
开发语言·javascript·算法
❆VE❆2 小时前
React基础篇(三):项目中 React 基础核心知识点实战
前端·javascript·react.js·前端框架
Hello--_--World3 小时前
React 的核心设计理念是什么?并列举三大核心特性。
javascript·react.js·ecmascript