Firefox incompatibility with img content url

Question

I am trying to set the 'img src' in the css file. I have studied different methods that could be used, but it is not working yet. if put the ::after in the css then in Chrome does not work but in Firefox works with different style. Getting confused a bit, any idea about this solution: 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>

Firefox doesn't support the content property in the same way as Chrome. http://stackoverflow.com/questions/12262118/content-url-is-not-working-in-firefox — Sanjay Kumar N S, Apr 11 '16 at 10:05
because in the CSS file you can not set SRC of the images, and instead you must use content-url. I can not do it in the HTML tag since the image of the link on hover is different! — KOrrosh Sh, Apr 11 '16 at 11:53

Roy · Accepted Answer · 2016-04-11T10:05:17.420

1

You can set the image as a background-image on the button element. No need to hassle with the img tag.

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

edited Apr 11 '16 at 10:05

answered Apr 11 '16 at 09:59

Roy

7,811
4
24
47

I have done this solution so far, but it is not working fine with the icons which I have, anyway tnx alot :) I should change the icons – KOrrosh Sh Apr 11 '16 at 10:12

Firefox incompatibility with img content url

1 Answers1