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";
    }
相关推荐
over6971 小时前
🌟 JavaScript 数组终极指南:从零基础到工程级实战
前端·javascript·前端框架
源猿人1 小时前
前端批量请求的并发控制与工程化实践
javascript
weipt1 小时前
关于vue项目中cesium的地图显示问题
前端·javascript·vue.js·cesium·卫星影像·地形
懒大王、1 小时前
Vue3 + OpenSeadragon 实现 MRXS 病理切片图像预览
前端·javascript·vue.js·openseadragon·mrxs
zhengxianyi5152 小时前
ruoyi-vue-pro数据大屏优化——在yudao-module-report-app使用yudao-moudle-sso优化单点登录
vue.js·前后端分离·数据大屏·go-view·ruoyi-vue-pro优化
诗意地回家2 小时前
淘宝小游戏反编译
开发语言·前端·javascript
徐同保2 小时前
react两个组件中间加一个可以拖动跳转左右大小的功能
前端·javascript·react.js
bjzhang752 小时前
使用 HTML + JavaScript 实现在线知识挑战
前端·javascript·html
全栈王校长2 小时前
Vue.js 3 模板语法与JSX语法详解
vue.js
全栈王校长2 小时前
Vue.js 3 项目构建:从 Webpack 到 Vite 的转变之路
vue.js