HTML custom (not Font-Awesome) icon class not working

I am trying to include a custom image as an icon rather than one from Font Awesome as is usually the case. So within my HTML button, I am referencing the CSS class which contains the background image url of my local image that I would like to use as an icon. However, it is not displaying in browser. Note that all code is fully validated.

HTML:

<div id="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
  <button type="submit" class="searchButton">
    <i class="icon"></i>
 </button>

CSS:

.icon {
background: url('../imgs/search-icon.png');
height: 20px;
width: 20px;
}

Fiddle:

#search {
  width: 100%;
  position: relative;
}

.searchTerm {
  float: left;
  width: 100%;
  border: 3px solid #00B4CC;
  padding: 5px;
  height: 20px;
  border-radius: 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus {
  color: #00B4CC;
}

.searchButton {
  position: absolute;
  right: -50px;
  width: 40px;
  height: 36px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
}

.icon {
  background: url('https://postimg.org/image/bfac47qav/');
}
<div id="search">
  <input type="text" class="searchTerm" placeholder="What are you looking for?">
  <button type="submit" class="searchButton">
        <i class="icon"></i>
     </button>
</div>

enter image description here

5 answers

  • answered 2017-12-11 08:55 fbuchlak

    i is inline element, try

    display:block;

    on .icon

  • answered 2017-12-11 08:55 Panna Das

    you can try this

    BUTTON {
     padding: 8px 8px 8px 32px;
     font-family: Arial, Verdana;   
    background: #f0f0f0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABfUlEQVQ4y42TP2tUQRTFf3PnPYiLIAiKiKhIsLbxS9hZaykWNmKjgqT0A6SxslRIFRsRv0QwdZB1YyGipImbzWbfnHst3sZdZF92Bw7D/LmH37nDpL1NAyAlHgDXWW18j+A9QBXTnQhu3H704TXS2aU5s/f2/qvTZeXx78goDdE0Z9anusYDmxn4zMAlYglBMsN9zkAzgxwrGGCGnLzIwELCVZbUG+oicDWoLOtBhZwcAQFUZd6gCC/dBPW5Hr+/7VPaCHci2DU5TJVDBe+Q5cyvwT4ucfdleS7noQdURfMEDd4Rwc04OvzDtfWbjCYTitpG/hehoI4IZhmpjTgcj09jUGmeQAVXB4EypbRxjk5O0JTAvgygOBSnap9xsUJC0/nx4BLFW3p78c7Z6SeOJ2ktvL2wUC7G4zHh4uBgxPEkre30Ewb0NrZ0+XDEeUtGXdULZckYDodYMp59vLD9eZftjS31EnARuPr0Xn6yfoVbq/zlrz/pb37SG+DHXyrMGdFXikHpAAAAAElFTkSuQmCC);
        background-position: 8px 8px;
        }
    

    fiddle http://jsfiddle.net/EFsU8/ and its solved in using images inside <button> element you can check that too

  • answered 2017-12-11 08:55 Narendra Verma

    Try This

    Add the display: block to the class icon, As per @fbuchlak suggested the answer but you have to also check the image path.

    This is not a correct path of the image

    https://postimg.org/image/bfac47qav/

    This is the correct path

    https://s7.postimg.org/5ecn753or/search-icon.png

    Below is the example

    #search{
      width:100%;
      position:relative;
    }
    .searchTerm {
      float: left;
      width: 100%;
      border: 3px solid #00B4CC;
      padding: 5px;
      height: 20px;
      border-radius: 5px;
      outline: none;
      color: #9DBFAF;
    }
    .searchTerm:focus{
      color: #00B4CC;
    }
    .searchButton {
      position: absolute;  
      right: -50px;
      width: 40px;
      height: 36px;
      border: 1px solid #00B4CC;
      background: #00B4CC;
      text-align: center;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
      font-size: 20px;
    }
    .icon{
       background: url('https://s7.postimg.org/5ecn753or/search-icon.png');
       width:20px;
        height: 20px;
        background-position: center;
        background-size:cover; 
        display:block;
    }
    <div id="search">
      <input type="text" class="searchTerm" placeholder="What are you looking for?">
          <button type="submit" class="searchButton">
            <i class="icon"></i>
         </button>
      </div>

  • answered 2017-12-11 08:55 Shiha Mohan

        .searchButton {
        background: #fff url(http://pixsector.com/cache/e7836840/ave6d43d85eb121839a10.png) no-repeat;
        background-size: contain;
        width: 4%;
        height: 21px;
    }
    
    
    
     <div id="search">
    <input type="text" class="searchTerm" placeholder="What are you looking for?">
     <button type="submit" class="searchButton">
       <span class="icon"></span> 
       </button>
       </div>
    

    https://jsfiddle.net/5tm168uk/13/

  • answered 2017-12-11 08:55 Hash

    Simple method is to, use content. Don't use background

    #search {
      width: 100%;
      position: relative;
    }
    
    .searchTerm {
      float: left;
      width: 100%;
      border: 3px solid #00B4CC;
      padding: 5px;
      height: 20px;
      border-radius: 5px;
      outline: none;
      color: #9DBFAF;
    }
    
    .searchTerm:focus {
      color: #00B4CC;
    }
    
    .searchButton {
      position: absolute;
      right: -50px;
      width: 40px;
      height: 36px;
      border: 1px solid #00B4CC;
      background: #00B4CC;
      text-align: center;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
      font-size: 20px;
    }
    
    .icon {
      content: url("https://media.giphy.com/media/PAbELXsl2P7mE/giphy.gif");
      height: 40px;
      width: 40px;
    }
    <div id="search">
      <input type="text" class="searchTerm" placeholder="What are you looking for?">
      <button type="submit" class="searchButton">
            <i class="icon"></i>
         </button>
    </div>