Mistalis Mistalis - 11 days ago 7
CSS Question

Use an image instead of a Bootstrap's glyphicon

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:enter image description here




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>


enter image description here

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
:

enter image description here

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

Thanks! :)

tmg tmg
Answer

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>

and CSS

.rechercheProduit .input-group-addon img{
  height: 24px;
  margin-right: -16px;
  margin-bottom: -6px;
  vertical-align:text-bottom; /* align the text */
}

updated Bootply

Comments