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";
    }
相关推荐
Hilaku6 分钟前
用“人话”讲明白10个最常用的正则表达式
前端·javascript·正则表达式
LL.。18 分钟前
同步回调和异步回调
开发语言·前端·javascript
网络点点滴22 分钟前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
Mintopia43 分钟前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
Mintopia1 小时前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js
paopaokaka_luck1 小时前
基于SpringBoot+Vue的酒类仓储管理系统
数据库·vue.js·spring boot·后端·小程序
来碗疙瘩汤1 小时前
使用 Three.js 与 CSS3DRenderer 在 Vue3 中加载网页为 3D 模型
前端·javascript
打野赵怀真1 小时前
在TypeScript中装饰器有哪些应用场景?
前端·javascript
destinying1 小时前
vite学习笔记
前端·javascript
LRH1 小时前
JS基础 - 手写数组扁平化函数
前端·javascript