Comment puis-je ajouter un glyphicône à une zone de saisie de type texte ? Par exemple, je veux avoir un "icône-utilisateur" dans une entrée de nom d'utilisateur, quelque chose comme ceci :
![entrez la description de l'image ici][1]
Nous parlerons de Bootstrap dans une seconde, mais voici les concepts CSS fondamentaux en jeu pour réaliser cette opération vous-même. Comme le souligne [beard of prey][beard answer], vous pouvez le faire avec CSS en positionnant absolument 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 :
<input type="text" ; class="form-control" ; />
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; }
[!css screenshot][css screenshot]][css embed]
Note : Cela suppose que vous utilisez [glyphicons][glyphicons], mais cela fonctionne aussi bien avec [font-awesome][font-awesome].
Pour FA, remplacez simplement.glyphicon
par.fa
.Avec Bootstrap :
Comme buffer points out, ceci peut être accompli nativement dans Bootstrap en utilisant [Validation States with Optional Icons] [validation states]. Cela se fait en donnant à l'élément
.form-group
la classe.has-feedback
et à l'icône la classe.form-control-feedback
. L'exemple le plus simple serait quelque chose comme ceci :**Pros** : * Inclut le support pour différents types de formulaires (Basic, Horizontal, Inline) * Inclut le support pour différentes tailles de contrôle (Default, Small, Large) **Inconvénients** : * Ne prend pas en charge l'alignement des icônes à gauche. Pour pallier les inconvénients, j'ai élaboré cette [pull-request][pull-request] avec des modifications pour prendre en charge les icônes alignées à gauche. Comme il s'agit d'une modification relativement importante, elle a été reportée à 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 les [**ces modifications du formulaire dans css**][formChangs.css] (également intégrées via un extrait de pile caché en bas de page)
<input type="text" ; class="form-control" ; placeholder="Username" ; />
***LESS** : sinon, si vous [construisez via less][compilateur less], voici les [modifications du formulaire dans less][formChanges.less] 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][feedback plunker] [feedback screenshot] [feedback screenshot]] [feedback embed] **P.S.** La suggestion de [frizi's][frizi] d'ajouter `pointer-events : none;` a été [ajoutée à bootstrap][pointer PR]. **Vous n'avez pas trouvé ce que vous cherchiez** ? Essayez ces questions similaires : * [Ajouter l'icône Twitter Bootstrap à la zone de saisie] [SO1] * [Mettre l'icône de recherche près de la boîte de texte Bootstrap] [SO2] ### 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;
}
[réponse de la barbe] : https://stackoverflow.com/a/19918345/1366033 [css plunker] : http://plnkr.co/edit/5D8fv5o5egpKpYz509O3?p=preview [css embed] : http://embed.plnkr.co/5D8fv5o5egpKpYz509O3/preview [capture d'écran css] : http://i.imgur.com/W6nybjN.png [glyphicons] : http://glyphicons.com/ [Font-awesome] : http://fortawesome.github.io/Font-Awesome/
[états de validation] : http://getbootstrap.com/css/#forms-control-validation [pull-request] : https://github.com/twbs/bootstrap/pull/14194 [formChangs.css] : https://run.plnkr.co/plunks/ZrnnkFR3Yv9HGQHrRMiW/formChanges.css [formChanges.less] : https://run.plnkr.co/plunks/ZrnnkFR3Yv9HGQHrRMiW/formChanges.less [compilateur less] : http://less2css.org/ [feedback plunker] : http://plnkr.co/edit/ZrnnkFR3Yv9HGQHrRMiW?p=preview [feedback embed] : http://embed.plnkr.co/ZrnnkFR3Yv9HGQHrRMiW/preview [feedback screenshot] : http://i.imgur.com/re67wct.png
[pointer PR] : https://github.com/twbs/bootstrap/pull/14104
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).
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;
}
Vous devriez pouvoir le faire avec les classes bootstrap 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>
Edit L'icône est référencée via la classe icon-user
. Cette réponse a été écrite à l'époque de la version 2 de Bootstrap. Vous pouvez voir la référence sur la page suivante : http://getbootstrap.com/2.3.2/base-css.html#images.