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";
    }
相关推荐
二哈喇子!21 小时前
BOM模型
开发语言·前端·javascript·bom
二哈喇子!21 小时前
Vue2 监听器 watcher
前端·javascript·vue.js
摘星编程1 天前
在OpenHarmony上用React Native:ActionSheet确认删除
javascript·react native·react.js
万物得其道者成1 天前
UI UX Pro Max: AI 驱动的设计系统生成引擎深度解析
人工智能·ui·ux
2501_944521591 天前
Flutter for OpenHarmony 微动漫App实战:推荐动漫实现
android·开发语言·前端·javascript·flutter·ecmascript
Amumu121381 天前
Vue核心(三)
前端·javascript·vue.js
Irene19911 天前
JavaScript中,为什么需要手动清理事件
javascript·手动清理事件监听器
摘星编程1 天前
OpenHarmony环境下React Native:Zustand持久化存储
javascript·react native·react.js
2501_944521591 天前
Flutter for OpenHarmony 微动漫App实战:图片加载实现
android·开发语言·前端·javascript·flutter·php
摘星编程1 天前
在OpenHarmony上用React Native:Recoil选择器异步数据
javascript·react native·react.js