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";
    }
相关推荐
GISer_Jing2 分钟前
透过浏览器原理学习前端三剑客:HTML、CSS与JavaScript
前端·javascript·css·html
林希_Rachel_傻希希14 分钟前
this 的指向与 bind() 方法详解
前端·javascript
Helloworld15 分钟前
掌握 JavaScript 的“变色龙”——this 关键字完全指南
javascript
想要狠赚笔的小燕16 分钟前
老项目救星:Vue3/Vite/JS 项目渐进式引入「代码 + Commit」自动化规范全指南(多人协作)
前端·vue.js
枫,为落叶23 分钟前
【vue】设置时间格式
前端·javascript·vue.js
渣哥28 分钟前
对象居然不用自己创建?Spring 依赖注入机制的真相惊呆了!
javascript·面试·github
勇敢di牛牛1 小时前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js
Sheldon一蓑烟雨任平生2 小时前
Vue3 Class 与 Style 绑定
vue.js·vue3·class与style绑定·绑定class·绑定style·vue3绑定class·vue3绑定style
Rhys..2 小时前
JS - npm init
开发语言·javascript·npm
夏天想2 小时前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm