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";
    }
相关推荐
上车函予4 分钟前
geojson-3d-renderer:从原理到实践,打造高性能3D地理可视化库
前端·vue.js·three.js
Lsx_19 分钟前
🔥Vite+ElementPlus 自动按需加载与主题定制原理全解析
前端·javascript·element
零一科技28 分钟前
Vue3拓展:实现原理 - 浅析
前端·vue.js
抱琴_28 分钟前
【Vue3】从混乱到有序:我用 1 个 Vue Hooks 搞定大屏项目所有定时任务
前端·vue.js
胡琦博客1 小时前
21天开源鸿蒙训练营|Day2 ReactNative 开发 OpenHarmony 应用环境搭建实录
javascript·react native·react.js
6***37941 小时前
React Native热更新方案
javascript·react native·react.js
x***J3481 小时前
React Native组件封装
javascript·react native·react.js
t***L2661 小时前
React Native真机调试连接不上的解决
javascript·react native·react.js
行云流水6261 小时前
uniapp h5图片长按隐藏默认菜单弹出
前端·javascript·uni-app
~无忧花开~2 小时前
JavaScript实现PDF本地预览技巧
开发语言·前端·javascript