Comment ajouter un glyphicon à une zone de saisie de type texte? Par exemple, je veux avoir «icon-user» dans une entrée de nom d'utilisateur, quelque chose comme ceci:

Sans Bootstrap:

Nous arriverons à Bootstrap dans une seconde, mais voici les concepts CSS fondamentaux en jeu pour le faire vous-même. Comme le souligne la barbe de proie , vous pouvez le faire avec CSS en positionnant absolument l'icône à l'intérieur de l'élément d'entrée. Ajoutez ensuite un rembourrage de chaque côté pour que le texte ne chevauche pas l'icône.

Donc pour le HTML suivant:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

Vous pouvez utiliser le CSS suivant pour aligner les glyphes à gauche et à droite:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Démo dans Plunker

Remarque : cela suppose que vous utilisez des glyphicons , mais fonctionne aussi bien avec font-awesome .
Pour FA, remplacez simplement .glyphiconpar.fa

Avec Bootstrap:

Comme le souligne le tampon , cela peut être accompli de manière native dans Bootstrap en utilisant des états de validation avec des icônes facultatives . Cela se fait en donnant à l' .form-groupélément la classe de .has-feedbacket à l'icône la classe de .form-control-feedback.

L'exemple le plus simple serait quelque chose comme ceci:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Avantages :

• Inclut la prise en charge de différents types de formulaires (de base, horizontal, en ligne)
• Inclut la prise en charge de différentes tailles de contrôle (par défaut, petit, grand)

Inconvénients :

• N'inclut pas la prise en charge des icônes d'alignement à gauche

Pour surmonter les inconvénients, j'ai mis en place cette pull-request avec des modifications pour prendre en charge les icônes alignées à gauche. Comme il s'agit d'un changement relativement important, il a été reporté à une version ultérieure, mais si vous avez besoin de ces fonctionnalités aujourd'hui , voici un guide d'implémentation simple:

Il suffit d'inclure ces modifications de formulaire dans CSS (également en ligne via un extrait de pile caché en bas)
_{* MOINS : alternativement, si vous construisez via moins , voici les modifications de formulaire en moins}

Ensuite, tout ce que vous avez à faire est d'inclure la classe .has-feedback-leftdans n'importe quel groupe qui a la classe .has-feedbackafin d'aligner à gauche l'icône.

Puisqu'il y a beaucoup de configurations html possibles sur différents types de formulaires, différentes tailles de contrôle, différents jeux d'icônes et différentes visibilités d'étiquette, j'ai créé une page de test qui montre l'ensemble correct de HTML pour chaque permutation avec une démo en direct.

Voici une démo dans Plunker

La suggestion de PS Frizi d'ajouter pointer-events: none;a été ajoutée au bootstrap

Vous n'avez pas trouvé ce que vous cherchiez ? Essayez ces questions similaires:

• Ajouter l'icône Twitter Bootstrap dans la zone de saisie
• Mettre l'icône de recherche près du bootstrap de la zone de texte

Ajout de CSS pour les icônes de rétroaction alignées à gauche

.has-feedback .form-control {
  padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
  padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
  padding-right: 46px;
}
.has-feedback-left .form-control {
  padding-right: 12px;
  padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
  padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
  padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
  left: 0;
}
.form-control-feedback {
  line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
  top: 0;
}
@media (min-width: 768px) {
  .form-inline .inline-feedback {
    position: relative;
    display: inline-block;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .has-feedback-left .form-control-feedback {
  left: 15px;
}

La méthode officielle . Aucun CSS personnalisé requis:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

DEMO: http://jsfiddle.net/LS2Ek/1/

Cette démo est basée sur un exemple dans les documents Bootstrap. Faites défiler jusqu'à "Avec des icônes facultatives" ici http://getbootstrap.com/css/#forms-control-validation

Voici une alternative CSS uniquement. J'ai configuré cela pour un champ de recherche pour obtenir un effet similaire à Firefox (et une centaine d'autres applications.)

Voici un violon .

HTML

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

CSS

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}

Voici comment je l'ai fait en utilisant uniquement le bootstrap CSS v3.3.1 par défaut:

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

Et voici à quoi ça ressemble:

Cette «triche» fonctionnera avec l'effet secondaire que la classe de glyphicon changera la police pour le contrôle d'entrée.

Violon

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

Si vous voulez vous débarrasser de l'effet secondaire, vous pouvez supprimer la classe "glyphicon" et ajouter le CSS suivant (il peut y avoir une meilleure façon de styliser le pseudo-élément d'espace réservé et je n'ai testé que sur Chrome).

Violon

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

Peut-être une solution encore plus propre:

Violon

CSS

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

HTML

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />

Cela peut être fait en utilisant des classes de la version officielle de bootstrap 3.x, sans CSS personnalisé.

Utilisez input-group-addonavant la balise d'entrée, à l'intérieur input-grouppuis utilisez l'un des glyphicons, voici le code

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

Voici la sortie

Pour le personnaliser, ajoutez quelques lignes de CSS personnalisées à votre propre fichier custom.css (ajustez le remplissage si nécessaire)

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

En rendant l'arrière-plan du input-group-addontransparent et en mettant le dégradé gauche de la balise d'entrée à zéro, l'entrée aura une apparence transparente. Voici la sortie personnalisée

Voici un exemple jsbin

Cela résoudra les problèmes de CSS personnalisés de chevauchement avec les étiquettes, d'alignement lors de l'utilisation input-lget de se concentrer sur le problème des onglets.

Voici une solution non bootstrap qui maintient votre balisage simple en incorporant la représentation d'image du glyphicon directement dans le CSS en utilisant le codage URI base64.

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}

<input class="search">

Si vous utilisez Fontawesome, vous pouvez le faire:

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

Résultat

La liste complète d'Unicode peut être trouvée dans la référence complète de l'icône Font Awesome 4.6.3

Voici une autre façon de le faire en plaçant le glyphicon à l'aide du :beforepseudo-élément en CSS.

Démonstration de travail dans jsFiddle

Pour ce HTML:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

Utilisez ce CSS ( Bootstrap 3.x et navigateurs Webkit compatibles )

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

Comme l'a dit @Frizi, nous devons ajouter pointer-events: none;afin que le curseur n'interfère pas avec le focus d'entrée. Toutes les autres règles CSS sont destinées au centrage et à l'ajout de l'espacement approprié.

Le résultat:

Vous pouvez utiliser son HTML Unicode

Donc, pour ajouter une icône d'utilisateur, ajoutez simplement à l' placeholderattribut, ou où vous le souhaitez.

Vous voudrez peut-être vérifier cette feuille de triche .

Exemple:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

N'oubliez pas de définir la police de l'entrée sur celle du Glyphicon, en utilisant le code suivant:, font-family: 'Glyphicons Halflings', Arialoù Arial est la police du texte normal dans l'entrée.

J'ai également une décision pour ce cas avec Bootstrap 3.3.5:

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

En entrée, j'ai quelque chose comme ceci:

Testé avec Bootstrap 4.

Prenez un form-controlet ajoutez is-validà sa classe. Remarquez comment le contrôle devient vert, mais plus important encore, remarquez l'icône de coche à droite du contrôle? Voilà ce que nous voulons!

Exemple:

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
	<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>

Si vous avez la chance de n'avoir besoin que de navigateurs modernes: essayez css transform translate. Cela ne nécessite pas de wrappers et peut être personnalisé afin que vous puissiez autoriser plus d'espacement pour l'entrée [type = nombre] pour accueillir le spinner d'entrée, ou le déplacer vers la gauche de la poignée.

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

Vous devriez pouvoir le faire avec les classes d'amorçage existantes et un peu de style personnalisé.

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>         

Modifier L'icône est référencée via la icon-userclasse. Cette réponse a été écrite au moment de Bootstrap version 2. Vous pouvez voir la référence sur la page suivante: http://getbootstrap.com/2.3.2/base-css.html#images