Я хотел бы использовать пользовательское изображение в 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>
Моя проблема в том, что я не могу заменить глификон моей картинкой в моей строке поиска.
Я попытался создать 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 px).
Вот изображение, которое должно заменить glyphicon:
Каков лучший способ Bootstrap для этого? Вот код моего кода.
Спасибо!:)
