使用图像而不是Bootstrap的glyphicon [英] Use an image instead of a Bootstrap's glyphicon

问题描述

我想在输入组中使用自定义图片，而不使用Bootstrap字形（不填充底部）（我的图片触摸底部的按钮），您可以在此图片上看到：

---

实际上，我使用Bootstrap的 glyphicon glyphicon-search ：

  div class =input-group> 
< input type =textclass =form-controlplaceholder =Rechercher un produit，uneréférence.../> 
< span class =input-group-addon> 
< span aria-hidden =trueclass =glyphicon glyphicon-search>< / span> 
< span class =hidden-xs text-upper-style> 
 Rechercher< / span> 
< / span> 
< / div> 
  

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

我试图创建CSS来模仿Bootstrap ，但总是显示错误：

b $ b

  .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 。

谢谢！ ：）

解决方案

您可以在<$ c $里使用简单的 img c> .input-group-addon 而不是 span.glyphicon 和一些负边距你可以得到你想要的结果。

HTML

 < div class = -group> 
< input type =textclass =form-controlplaceholder =Rechercher un produit，uneré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; / *对齐文本* / 
} 
  

---

更新Bootply

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:

---

Actually, I use Bootstrap's 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>

My issue is that I fail to replace glyphicon by my picture in my search bar.

I've tried to create CSS to mimic those of Bootstrap, but it always render bad:

---

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>

---

Note that my image is not square (60x37 px).

Here is the picture that should replace the glyphicon:

What is the best Bootstrap way to do that? Here is a Bootply of my code.

Thanks! :)

解决方案

You can use simple img inside .input-group-addon instead of span.glyphicon and with some negative margins you can get the result you want.

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

这篇关于使用图像而不是Bootstrap的glyphicon的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！