css - 使用图像而不是 Bootstrap 的字形图标

Question

我想在 input-group 中使用自定义图像而不是 Bootstrap 字形没有填充底部(我的图像触摸按钮的底部)，因为你可以在这张图片上看到:

---

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

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

我试图创建 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 的图片:

最好的 Bootstrap 方法是什么？ Here is a Bootply我的代码。

谢谢! :)

Answer 1

你可以在 .input-group-addon 中使用简单的 img 而不是 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="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