Firefox与img内容url不兼容

Question

我正在尝试在css文件中设置"img src"。我研究了可以使用的不同方法，但还没有奏效。如果将：：after放在css中，那么在Chrome中不起作用，但在Firefox中可以使用不同的样式。有点困惑，关于这个解决方案的任何想法：https://jsfiddle.net/er1txx0z/

  <label class="control-label"></label>      
  <button id="btn1" class="btn btn-warning shadow dcweb_search" disabled="true">
    <img class="dcweb_search_img" />
  </button>

    <style>
    .dcweb_search{
    height: 60px;
    width: 60px;
    position: relative;
    top:-17px
    }
    .dcweb_search_img{
    width:40px;
    content:url('https://api.icons8.com/download/c5c8b5ba35e008ea471e9a53c5fa74c03ef6e78c/iOS7/PNG/256/Very_Basic/search-256.png');
    }
    </style>

Answer 1

您可以在button元素上将图像设置为background-image。无需使用img标签。

.dcweb_search {
  height: 60px;
  width: 60px;
  position: relative;
  top: -17px;
  background-image: url('https://api.icons8.com/download/c5c8b5ba35e008ea471e9a53c5fa74c03ef6e78c/iOS7/PNG/256/Very_Basic/search-256.png');
  background-size: 40px 40px;
  background-position: center;
  background-repeat: no-repeat;
}

<label class="control-label"></label>
<br>
<button id="btn1" class="btn btn-warning shadow dcweb_search" disabled="true">
</button>