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";
    }
相关推荐
zhoxier1 小时前
elementui el-select 获取value和label 以及 对象的方法
javascript·vue.js·elementui
是小狐狸呀1 小时前
elementUI-表单-下拉框数据选中后,视图不更新
前端·javascript·elementui
四维碎片5 小时前
【Qt】线程池与全局信号实现异步协作
开发语言·qt·ui·visual studio
IT码农-爱吃辣条5 小时前
Three.js 初级教程大全
开发语言·javascript·three.js
四岁半儿5 小时前
vue,H5车牌弹框定制键盘包括新能源车牌
前端·vue.js
烛阴6 小时前
告别繁琐的类型注解:TypeScript 类型推断完全指南
前端·javascript·typescript
gnip6 小时前
工程项目中.env 文件原理
前端·javascript
JohnYan7 小时前
工作笔记 - CentOS7环境运行Bun应用
javascript·后端·容器
★YUI★8 小时前
学习游戏制作记录(制作系统与物品掉落系统)8.16
学习·游戏·ui·unity·c#
东风西巷9 小时前
Rubick:基于Electron的开源桌面效率工具箱
前端·javascript·electron·软件需求