Use an image instead of a Bootstrap's glyphicon

Question

I would like to use a custom image in an input-group instead of a Bootstrap glyphicon without padding bottom (my image touch the bottom of the button), as you can see on this picture:

---

Actually, I use Bootstrap's glyphicon glyphicon-search:

<div class="input-group">
      <input type="text" class="form-control" placeholder="Rechercher un produit, une référence ..."/>
      <span class="input-group-addon">
        <span aria-hidden="true" class="glyphicon glyphicon-search"></span>
        <span class="hidden-xs text-upper-style">
          Rechercher</span>
      </span>
</div>

My issue is that I fail to replace glyphicon by my picture in my search bar.

I've tried to create CSS to mimic those of Bootstrap, but it always render bad:

---

CSS

.glyphi {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    float: left;
    display: block;
}
.glyphi.search {
    background: url(../img/header/search.png);
    background-size: cover; 
}
.glyphi.normal { 
    width: 28px; //But Bootstrap glyphicon is 16x16...
    height: 16px;
}

HTML

<span class="glyphicon glyphicon-search"></span>

---

Note that my image is not square (60x37 px).

Here is the picture that should replace the glyphicon:

What is the best Bootstrap way to do that? Here is a Bootply of my code.

Thanks! :)

Answer 1

You can use simple img inside .input-group-addon instead of span.glyphicon and with some negative margins you can get the result you want.

HTML

<div class="input-group">
   <input type="text" class="form-control" placeholder="Rechercher un produit, une référence ...">      
   <span class="input-group-addon">
       <img src="http://i.stack.imgur.com/vr0uy.png">
       <span class="hidden-xs text-upper-style">Rechercher</span>
   </span>      
</div>

CSS

.rechercheProduit .input-group-addon img{
  height: 24px;
  margin-right: -16px;
  margin-bottom: -6px;
  vertical-align:text-bottom; /* align the text */
}

---

Updated Bootply