本文介绍了使用图像而不是Bootstrap的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方法是什么?



谢谢! :)

解决方案

您可以在<$ 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; / *对齐文本* /
}







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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

1403页,肝出来的..

09-08 05:31