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";
    }
相关推荐
芭拉拉小魔仙25 分钟前
企业级Vue项目的状态管理:从原理到实战架构
前端·vue.js·架构
扶苏10021 小时前
Vue 3 响应式原理深度解析
前端·javascript·vue.js
工控小龙人2 小时前
医疗器械HMI:输液泵的精准控制界面
ui·人机交互·用户界面
Real-Staok3 小时前
GUI 框架基础需求、设计和实现 - 2 UI / UX 设计
ui·ux
装不满的克莱因瓶3 小时前
Java7新特性:try-with-resources写法
java·前端·javascript·jdk·新特性·jdk7
鹓于5 小时前
电脑软件迁移
ui
哆啦A梦15885 小时前
Vue3魔法手册 作者 张天禹 06_监控
前端·vue.js·typescript
半兽先生8 小时前
使用 retire.js 自动检测前端 JavaScript 库漏洞
开发语言·前端·javascript
扶苏10028 小时前
详解Vue3的自定义 Hooks
前端·javascript·vue.js
专注VB编程开发20年9 小时前
WebView2 处理跨域访问限制,Frame脚本执行,难度比CEF大10倍
前端·javascript·.net