Img içeriğiyle Firefox uyuşmazlığı url

Question

'img src' dosyasını css dosyasında ayarlamaya çalışıyorum. Kullanılabilecek farklı yöntemler üzerinde çalıştım, ama henüz çalışmıyor. eğer css sonra css koyarsanız o zaman Chrome çalışmıyor, ancak Firefox'ta farklı stil ile çalışır. 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

Sen button elemanı üzerinde background-image olarak görüntü ayarlayabilirsiniz: , bu çözüm hakkında bir fikrin biraz karıştı alınıyor. img etiketi ile uğraşmaya gerek yok.

.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>