el-button自定义图片显示_el-button icon

想要在button上显示自己的图片，而不是使用element-ui提供的el-icon
效果如图：中间这个按钮就是我自己的图片，devops.png

具体实现方法如下：

1. 首先将图片引入，引入路径随你，我是将图片放到assets目录下
   

2. 在按钮处自定义icon

                  <el-button @click="to_devops(scope.row.pr_url)">
                    <i class="el-icon-devops" />		// 自定义icon，这个el-icon-devops是我自己命名的
                  </el-button>
1
2
3

3. 在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;
}
1
2
3
4
5
6
7
8
9
10
11

最后就可以显示出来啦。我用的是默认按钮，所以背景是白色的，如果想要其它背景色可以自己调。