使用图像代替 Bootstrap 的字形图标

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:

其实我用的是Bootstrapglyphicon 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>

我的问题是我无法在搜索栏中用我的图片替换字形。

我尝试创建 CSS 来模仿 Bootstrap，但它总是渲染得很糟糕：

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>

请注意，我的图像不是正方形（60x37 像素）。

这是应该替换的图片glyphicon:

最好的引导方法是什么？这是一个 Bootply http://www.bootply.com/tVROdOPG6i我的代码。

谢谢！ :)

您可以使用简单的img inside .input-group-addon代替span.glyphicon并且在一些负边距的情况下，您可以获得您想要的结果。

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="https://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 */
}

更新了 Bootply http://www.bootply.com/x3pakSuR1e