element ui 中el-button自定义icon图标不生效问题解析

181 阅读 0 评论 120 点赞

我是靠谱客的博主幸福板栗，这篇文章主要介绍element ui 中el-button自定义icon图标不生效问题解析，现在分享给大家，希望可以做个参考。

elementUI中 `el-button`按钮自定义`icon`图标步骤，和网上说的步骤一样，

第一添加图片到项目中
写css样式
直接引入

代码如下：

<el-button plain round icon="el-icon-my-choose">选品库</el-button>

注意：css样式需要注意的问题不要写在scoped 否则不生效

<style lang="scss"> //不要定义 scoped
//修改icon
.el-icon-my-choose {
background: url("@/assets/images/selectionLib.png") center no-repeat;
font-size: 16px;
background-size: cover;
}
.el-icon-my-choose:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
</style>