使用图像而不是 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 方法是什么？ 这是我的代码的 Bootply 。

谢谢！ :)

原文由 Mistalis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在 --- 中使用简单的 img .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="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 */
}

---

更新 Bootply

原文由 tmg 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以覆盖 .glyphicon 并将您的图像设置为 background 并删除其 icon

 .rechercheProduit .input-group-addon span.glyphicon{
    background: url(http://i.stack.imgur.com/vr0uy.png);
    background-size: 100% 100%;
    height: 24px;
    width: 38px;
    vertical-align: text-bottom;
    margin: -6px -13px 0 0;
    top: auto;
    bottom: -6px;
    z-index: 0;
}

.rechercheProduit .input-group-addon span.glyphicon:before{
    content:'';  // To remove its default icon
}

https://jsfiddle.net/ms5e0535/

原文由 Ahmed Salama 发布，翻译遵循 CC BY-SA 3.0 许可协议