title: Use an image instead of a Bootstrap's glyphicon
body: <p>I would like to use a custom image in an <code>input-group</code> instead of a Bootstrap glyphicon <strong>without padding bottom</strong> (my image touch the bottom of the button), as you can see on this picture:<a href="https://i.stack.imgur.com/q44SB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q44SB.jpg" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>Actually, I use Bootstrap's <code>glyphicon glyphicon-search</code>:</p>
  
  <pre><code>&lt;div class="input-group"&gt;
        &lt;input type="text" class="form-control" placeholder="Rechercher un produit, une référence ..."/&gt;
        &lt;span class="input-group-addon"&gt;
          &lt;span aria-hidden="true" class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
          &lt;span class="hidden-xs text-upper-style"&gt;
            Rechercher&lt;/span&gt;
        &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/SqoHn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SqoHn.png" alt="enter image description here"></a></p>
  
  <p>My issue is that I fail to replace glyphicon by my picture in my search bar.</p>
  
  <p>I've tried to create CSS to mimic those of Bootstrap, but it always render bad:</p>
  
  <hr>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
  </code></pre>
  
  <hr>
  
  <p>Note that my image is not square (60x37 px).</p>
  
  <p>Here is the picture that should replace the <code>glyphicon</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/vr0uy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vr0uy.png" alt="enter image description here"></a></p>
  
  <p>What is the best Bootstrap way to do that?
  <a href="http://www.bootply.com/tVROdOPG6i" rel="nofollow noreferrer">Here is a Bootply</a> of my code.</p>
  
  <p>Thanks! :)</p>