web-dev-qa-db-fra.com

Utiliser une image au lieu d'un glyphicon de Bootstrap

Je voudrais utiliser une image personnalisée dans un input-group au lieu d'un glyphicon Bootstrap sans remplissage du bas (mon image touche le bas du bouton), comme vous pouvez le voir sur cette image:  enter image description here

En fait, j'utilise le glyphicon glyphicon-search de Bootstrap:

<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

Mon problème est que je ne parviens pas à remplacer glyphicon par ma photo dans la barre de recherche.

J'ai essayé de créer des CSS pour imiter ceux de Bootstrap, mais cela rend toujours 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>

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

Voici l'image qui devrait remplacer la glyphicon:

 enter image description here

Quelle est la meilleure façon de faire cela avec Bootstrap? Voici un Bootply de mon code.

Merci! :)

csstwitter-bootstraptwitter-bootstrap-3responsive-design
14
Mistalis

Vous pouvez utiliser un simple img dans .input-group-addon au lieu de span.glyphicon et avec certaines marges négatives, vous pouvez obtenir le résultat souhaité.

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 */
}

Bootply mis à jour

4
tmg

Vous devriez voir comment fonctionne le glyphicon span: Si vous l'inspectez, vous verrez que la partie intéressante de ce span est en fait son pseudo-élément, le :before qui appelle une police d'icônes un contenu.

 Screenshot of the Glyphicon span behaviour in the DOM

Quelques solutions sont réellement possibles pour résoudre votre problème.

Passer outre

  1. Une des solutions serait de remplacer ce pseudo-élément par En redéclarant son contenu:

    .rechercheProduit .input-group-addon {
  /* Declaring the parent as relative so the .glyphicon-search child span 
     as a position absolute to its parent.. 
     That probably doesn't make any sense. */
  position: relative;
}
.rechercheProduit .glyphicon-search {
  /* 'absolute' in the .input-group-addon context */
  position: absolute; 
  top: auto;
  bottom: 0;
  left: 5px;
  height: 80%;
  width: auto; 
  overflow: hidden;
}
  .rechercheProduit .glyphicon-search:before {
    content: '';
    display: block;
    width: 50px; /* Generic width */
    height: 100%;
    background: url('http://i.stack.imgur.com/vr0uy.png') no-repeat;
    background-size: auto 100%;
  }
.rechercheProduit .text-upper-style {
  /* relative to its context. Especially here to deal with the display order. */
  position: relative;
  margin-left: 20px;
}

    Démo 1

Span personnalisé

  1. Une autre solution, qui serait probablement meilleure, consisterait à créer votre propre étendue avec votre propre pseudo-élément (CSS est Semblable au dernier exemple, renommer la partie .glyphicon-search Évidemment.):

    <span class="input-group-addon">
  <span class="search-icon"></span>
  <span class="hidden-xs text-upper-style">
  Rechercher</span>
</span>

    Démo 2

Image

  1. Même si personnellement, je préfère avoir l'icône en tant qu'image d'arrière-planici (regardez cette question et ses réponses ), déclarer L'icône en tant qu'image est une autre solution qui fonctionne. 

    c.f. la réponse de tmg à ce sujet.

À propos du reste

Pour aller plus loin avec votre code, vous devriez penser au fait que vous travaillez dans un formulaire avec un input[type="text"] comme entrée principale.

Vous devrez soumettre ce formulaire et à moins que vous ne traitiez avec un événement clic sur cette étendue principale pour soumettre votre formulaire, vous devrez déclarer votre rechercher span en tant que input comme bien (type=“submit”). 

Ce serait sémantiquement plus correct et plus facile pour vous de gérer cette action de bouton dans le futur.

Ma proposition finale serait alors la suivante: 

<div class="input-group">
  <input type="text" class="form-control" placeholder="Rechercher un produit, une référence ...">
  <label class="input-group-addon">
    <span class="search-icon"></span>
    <input type="submit" value="Rechercher" class="hidden-xs text-upper-style" />
  </label>
</div>

-

.text-upper-style {
  background: none;
  text-transform: uppercase;
  border: 0;
  outline: 0;
}
.rechercheProduit .input-group-addon {
  border: 0;
}

Démo 3

À propos de la réponse, déclarez simplement un min-width sur votre étiquette:

.rechercheProduit .input-group-addon {
  min-width: 40px;
  overflow: hidden;
}

J'espère que cela a du sens. Je suis ouvert à toute suggestion, modification, etc ...

Bonne chance!

4
Alexis B.

C'est aussi simple que de remplacer la balise span glyphicon pour votre balise d'image personnalisée en forçant une hauteur correcte et en supprimant les marges intérieures et extérieures du texte "rechercher".

Alors, ajoutez ceci à votre code HTML:

  <span class="input-group-addon">
    <img height="25" src="http://i.stack.imgur.com/vr0uy.png" alt="custom-magnifier">
    <span class="hidden-xs text-upper-style">
      Rechercher</span>
  </span>

Alors, ajoutez ceci à votre css:

.rechercheProduit .input-group-addon {
  padding: 0 12px;
}
.rechercheProduit .input-group-addon {
  vertical-align: bottom;
}

Vous avez ici un exemple: http://www.bootply.com/CAPEgZTt3J

2
Naui Monclús

Ceci est mon essai, j'espère que celui-ci pourra vous aider. J'utilise absolute. Essayez juste de voir en pleine page, je travaille le responsive design.

* {
    border-radius: 0 !important;
}
.rechercheProduit .input-group-addon {
  border: 0px;
  color: #ffffff;
  background: #004392;
  cursor: pointer;
}
.rechercheProduit:hover {
  color: #fbba00;
}
.rechercheProduit .form-control,
.rechercheProduit .input-group-addon {
  border: solid 2px #004392;
}
.rechercheProduit .input-group-addon {
  -moz-border-radius: 0;
  -webkit-border-w: 0;
  border-radius: 0;
  color: #ffffff;
  background: #004392;
  cursor: pointer;
}
.rechercheProduit .input-group-addon:hover {
  color: #fbba00;
}

.text-upper-style {
  text-transform: uppercase;
  padding-left: 20px;
}
.glyphicon-search:before {
    background: url(http://i.stack.imgur.com/vr0uy.png)center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 25px;
    width: 42px;
    content: '';
    z-index: 99;
    position: absolute;
    top: -15px;
    left: -8px;
}
.glyphicon-search:before{
  content: '' !important;
}
@media screen and (max-width: 767px){
  .cus-icon{
    padding: 0 10px;
  }
  
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-8 col-md-6">
  <form class="form-horizontal rechercheProduit">
    <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 cus-icon"></span>
        <span class="hidden-xs text-upper-style">
          Rechercher</span>
      </span>
    </div>
  </form>
</div>

1
mmativ

Voici le css qui remplacera l'icône de recherche

.glyphi {
 background: rgba(0, 0, 0, 0) url("http://i.stack.imgur.com/vr0uy.png") no-repeat scroll 0 0 / contain;
 display: inline-block;
 font-style: normal;
 font-weight: 400;
 height: 16px;
 line-height: 1;
 position: relative;
 top: 1px;
 width: 60px;
 }

Vous devez également redimensionner l’icône de recherche car l’élément parent a un remplissage.

1
Sanjeev Kumar

Vous devez masquer le glyphicon par défaut, puis utiliser une image personnalisée . Essayez ces lignes:

.glyphicon-search::before {
    content:none!important;
}
.glyphicon-search {
    background-image:url(../ur-image);
    height:20px;
    width:20px;
    background-repeat:no-repeat;
    background-size:cover;
}
1
hdev

Vous pouvez remplacer .glyphicon et définir votre image comme une background pour elle et supprimer sa icon 

.rechercheProduit .input-group-addon span.glyphicon{
    background: url(http://i.stack.imgur.com/vr0uy.png);
    background-size: 100% 100%;
    height: 24px;
    width: 38px;
    vertical-align: text-bottom;
    margin: -6px -13px 0 0;
    top: auto;
    bottom: -6px;
    z-index: 0;
}

.rechercheProduit .input-group-addon span.glyphicon:before{
    content:'';  // To remove its default icon
}

https://jsfiddle.net/ms5e0535/

1
Ahmed Salama

Une solution consisterait à utiliser une image d’arrière-plan sur l’entrée add-group-addon + du padding-left et à supprimer complètement le glyphicon:

* {
  border-radius: 0 !important;
}
.rechercheProduit .input-group-addon {
  border: 0px;
  color: #ffffff;
  background: #004392;
  cursor: pointer;
}
.rechercheProduit:hover {
  color: #fbba00;
}
.rechercheProduit .form-control,
.rechercheProduit .input-group-addon {
  border: solid 2px #004392;
}
.rechercheProduit .input-group-addon {
  -moz-border-radius: 0;
  -webkit-border-w: 0;
  border-radius: 0;
  color: #ffffff;
  background: #004392;
  cursor: pointer;
  background-image: url("http://i.stack.imgur.com/vr0uy.png");
  background-position: 6px 3px;
  background-repeat: no-repeat;
  background-size: contain;
  padding-left: 38px;
}
.rechercheProduit .input-group-addon:hover {
  color: #fbba00;
}
.text-upper-style {
  text-transform: uppercase;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-8 col-md-6">
  <form class="form-horizontal rechercheProduit">
    <div class="input-group">
      <input class="form-control" placeholder="Rechercher un produit, une référence ..." type="text">
      <span class="input-group-addon">
        <span class="text-upper-style">
          Rechercher</span>
      </span>
    </div>
  </form>
</div>

Vous devez bien sûr modifier la position de l’arrière-plan, la taille de l’arrière-plan et le rembourrage à gauche pour les adapter à votre image.

Ajustez le background-size pour définir la taille de l'image, changez le background-position pour positionner l'image dans la span et modifiez la valeur padding-left pour déplacer le texte plus à droite.

1
Quack