Utilisez une image à la place du glyphicon de Bootstrap

Je voudrais utiliser une image personnalisée dans un input-group au lieu d'un "Bootstrap" glyphicon sans rembourrage bas (mon image de toucher le bas du bouton), comme vous pouvez le voir sur cette photo:Utilisez une image à la place du glyphicon de Bootstrap


En fait, j'utilise Bootstrap est 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>

Utilisez une image à la place du glyphicon de Bootstrap

Mon problème est que je n'arrive pas à remplacer glyphicon par mon image dans ma barre de recherche.

J'ai essayé de créer le CSS pour imiter celles de Bootstrap, mais il y a toujours rendu mauvais:


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>

Remarque que mon image n'est pas carrée (60x37 px).

Ici est l'image qui devrait remplacer le glyphicon:

Utilisez une image à la place du glyphicon de Bootstrap

Quel est le meilleur Bootstrap façon de le faire?
Voici une Bootply de mon code.

Merci! 🙂

source d'informationauteur Mistalis