Ajouter le glyphicône Bootstrap au champ de saisie

Question

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

Answer 1

Sans Bootstrap :

Nous aborderons Bootstrap dans une seconde, mais voici les concepts CSS fondamentaux en jeu pour réaliser cette opération vous-même. Comme la barbe de la proie souligne Pour ce faire, vous pouvez utiliser une feuille de style CSS en positionnant l'icône à l'intérieur de l'élément de saisie. Ajoutez ensuite un remplissage de chaque côté pour que le texte ne chevauche pas l'icône.

Ainsi 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émonstration à Plunker

Note : Cela suppose que vous utilisez glyphicons mais fonctionne aussi bien avec font-awesome .
Pour FA, il suffit de remplacer .glyphicon avec .fa

---

Avec Bootstrap :

Comme buffer fait remarquer il est possible de le faire nativement dans Bootstrap en utilisant États de validation avec icônes facultatives . Cela se fait en donnant à l .form-group élément la classe de .has-feedback et 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>

Pour :

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

Cons :

• N'inclut pas le support pour gauche alignement des icônes

Pour surmonter les inconvénients, j'ai mis en place ce demande de tirage au sort avec des changements pour supporter les icônes alignées à gauche. Comme il s'agit d'un changement relativement important, il a été reporté à une prochaine version, mais si vous avez besoin de ces fonctionnalités aujourd'hui Voici un guide de mise en œuvre simple :

Il suffit d'inclure le ces changements de formulaire en css (également inlined via le snippet de la pile cachée en bas)
_{<strong>*LESS </strong>: alternativement, si vous êtes <a href="http://less2css.org/" rel="noreferrer">construire par moins </a>voici le <a href="https://run.plnkr.co/plunks/ZrnnkFR3Yv9HGQHrRMiW/formChanges.less" rel="noreferrer">les changements de forme en moins</a>}

Ensuite, tout ce que vous avez à faire est d'inclure la classe .has-feedback-left sur tout groupe qui a la classe .has-feedback afin d'aligner l'icône à gauche.

Comme il y a beaucoup de configurations html possibles sur différents types de formulaires, différentes tailles de contrôles, différents jeux d'icônes et différentes visibilités des étiquettes, j'ai créé une page de test qui montre l'ensemble correct de HTML pour chaque permutation ainsi qu'une démonstration en direct.

Voici une démo dans Plunker

P.S. suggestion de frizi d'ajouter pointer-events: none; a été ajouté à bootstrap

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

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

Ajout d'un 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;
}

Answer 2

Le site officiel méthode. Aucune CSS personnalisée n'est nécessaire :

<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/yajf3b7q

Cette démo est basée sur un exemple dans la documentation de Bootstrap. Faites défiler la page jusqu'à "With Optional Icons" (avec des icônes facultatives). http://getbootstrap.com/css/#forms-control-validation

Answer 3

Voici une alternative uniquement en CSS. Je l'ai configurée pour un champ de recherche afin d'obtenir un effet similaire à celui de Firefox (et d'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;
}

Answer 4

Cette "tricherie" fonctionnera avec l'effet secondaire que la classe glyphicon changera la police du 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 placeholder 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" />

Answer 5

Voici une autre façon de procéder en plaçant le glyphicon à l'aide de la fonction :before pseudo-élément en CSS.

Démonstration fonctionnelle 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 cette CSS ( Compatible avec Bootstrap 3.x et les navigateurs basés sur Webkit )

.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 de la saisie. Toutes les autres règles CSS servent à centrer et à ajouter l'espacement approprié.

Le résultat :