使用图像而不是Bootstrap的glyphicon

Question

我想在一个没有填充底部input-group的Bootstrap glyphicon中使用自定义图像(我的图像触摸按钮的底部),如下图所示:

---

实际上,我使用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.

谢谢!:)

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

Answer 2

你应该看看 glyphicon 是如何span工作的：如果你检查它，你会发现其中有趣的部分span实际上是它的伪元素，:before它调用图标字体作为内容。

一些解决方案实际上可以解决您的问题。

覆盖

1. 解决方案之一是通过重新声明其内容来覆盖该伪元素：

   .rechercheProduit .input-group-addon {
     /* Declaring the parent as relative so the .glyphicon-search child span 
        as a position absolute to its parent.. 
        That probably doesn't make any sense. */
     position: relative;
   }
   .rechercheProduit .glyphicon-search {
     /* 'absolute' in the .input-group-addon context */
     position: absolute; 
     top: auto;
     bottom: 0;
     left: 5px;
     height: 80%;
     width: auto; 
     overflow: hidden;
   }
     .rechercheProduit .glyphicon-search:before {
       content: '';
       display: block;
       width: 50px; /* Generic width */
       height: 100%;
       background: url('http://i.stack.imgur.com/vr0uy.png') no-repeat;
       background-size: auto 100%;
     }
   .rechercheProduit .text-upper-style {
     /* relative to its context. Especially here to deal with the display order. */
     position: relative;
     margin-left: 20px;
   } 
   

   演示 1

自定义跨度

2. 另一个可能更好的解决方案是使用您自己的伪元素实际创建您自己的跨度（CSS 类似于上一个示例，.glyphicon-search显然重命名了该部分）：

   <span class="input-group-addon">
     <span class="search-icon"></span>
     <span class="hidden-xs text-upper-style">
     Rechercher</span>
   </span>
   

   演示 2

图片

3. 即使我个人更喜欢将图标作为这里的背景图像（看看这个问题及其答案），将图标声明为图像是另一种有效的解决方案。

   参见tmg对此的回答。

关于其余

为了超越您的代码，您应该考虑这样一个事实，即您正在使用input[type="text"]作为主要输入的表单工作。

您必须提交此表单，除非您在此主跨度上处理单击事件以提交表单，否则您还必须声明您的rechercher跨度input( type=“submit”)。

这在语义上会更正确，也更容易让您将来处理此按钮操作。

我的最终提议是：（也考虑“自定义”跨度图标解决方案）

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

——

.text-upper-style {
  background: none;
  text-transform: uppercase;
  border: 0;
  outline: 0;
}
.rechercheProduit .input-group-addon {
  border: 0;
}

演示 3

关于响应式，只需min-width在您的标签上声明一个：

.rechercheProduit .input-group-addon {
  min-width: 40px;
  overflow: hidden;
}

希望这是有道理的。我愿意接受任何类型的建议、编辑等...

好的机会！