el-button自定义图片显示
想要在button上显示自己的图片,而不是使用element-ui提供的el-icon。首先将图片引入,我是将图片放到assets目录下。
·
想要在button上显示自己的图片,而不是使用element-ui提供的el-icon
效果如图:中间这个按钮就是我自己的图片,devops.png
具体实现方法如下:
-
首先将图片引入,引入路径随你,我是将图片放到assets目录下
-
在按钮处自定义icon
<el-button @click="to_devops(scope.row.pr_url)">
<i class="el-icon-devops" /> // 自定义icon,这个el-icon-devops是我自己命名的
</el-button>
- 在css中设置el-icon-devops
::v-deep .el-icon-devops {
background: url('../../../assets/devops.png') center no-repeat; // 注意此处的url,在这里引入自己的图片
font-size: 12px;
background-size: cover;
}
::v-deep .el-icon-devops:before {
content: "替";
font-size: 12px;
visibility: hidden;
}
最后就可以显示出来啦。我用的是默认按钮,所以背景是白色的,如果想要其它背景色可以自己调。
更多推荐
所有评论(0)