Ajouter Bootstrap Glyphicon à la zone de saisie
Comment puis-je 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 allons arriver à Bootstrap dans une seconde, mais voici les concepts fondamentaux de CSS en jeu pour le faire vous-même. Comme la barbe de la proie indique , 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 code 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 glyphicons , mais fonctionne aussi bien avec font-awesome .
Pour FA, remplacez simplement.glyphiconpar.fa
Avec Bootstrap:
Comme le tampon indique , ceci peut être accompli de manière native dans Bootstrap en utilisant États de validation avec icônes facultatives . Ceci est fait en donnant à l'élément .form-group 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>
Avantages :
- Inclut la prise en charge de différents types de formulaires (Basique, 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 le support pour left aligner les icônes
Pour surmonter les inconvénients, je mets ensemble ceci pull-request avec des modifications pour supporter 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:
Incluez simplement les ) changements de formulaire en css (également insérés dans un extrait de pile caché).
* LESS : alternativement, si vous êtes construction via less , voici le la forme change en moins
Ensuite, tout ce que vous avez à faire est d’inclure la classe .has-feedback-left sur tout groupe possédant la classe .has-feedback afin d’aligner à gauche l’icône.
Puisqu'il existe de nombreuses configurations html possibles sur différents types de formulaire, différentes tailles de contrôles, différents ensembles d'icônes et différentes visibilités, j'ai créé une page de test qui présente le bon ensemble de code HTML pour chaque permutation, ainsi qu'une démonstration.
Voici une démo dans Plunker
P.S. suggestion de frizi d'ajouter
pointer-events: none;a été ajouté au bootstrap
Vous n'avez pas trouvé ce que vous cherchiez ? Essayez ces questions similaires:
- Ajouter l'icône Twitter Bootstrap à la zone de saisie
- Placer l'icône de recherche près du bootstrap de la zone de texte
Ajout de CSS pour les icônes de commentaires alignés à 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 Bootstrap docs. Faites défiler jusqu'à "Avec des icônes facultatives" ici http://getbootstrap.com/css/#forms-control-validation
Voici une alternative uniquement CSS. Je l'ai configuré pour un champ de recherche afin d'obtenir un effet similaire à Firefox (et 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;
}
Voici comment je l'ai fait en utilisant uniquement la valeur par défaut bootstrap CSS v3.3.1:
<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 selon lequel la classe glyphicon changera la police pour le contrôle d’entrée.
<input class="form-control glyphicon" type="search" placeholder=""/>
Si vous souhaitez vous débarrasser de l'effet secondaire, vous pouvez supprimer la classe "glyphicon" et ajouter le code CSS suivant (Il existe peut-être un meilleur moyen de styliser le pseudo-élément d'espace réservé et je l'ai uniquement testé sur Chrome).
.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:
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=" search" />
<input class="form-control glyphicon" type="text" placeholder=" username" />
<input class="form-control glyphicon" type="password" placeholder=" password" />
Cela peut être fait en utilisant les classes de la version officielle de bootstrap 3.x, sans aucun css personnalisé.
utilisez input-group-addon avant la balise d'entrée, à l'intérieur de input-group, puis 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 fichiers custuom css à 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-addon transparent et en rendant la gradante gauche de la balise d'entrée égale à zéro, l'entrée aura une apparence transparente. Voici la sortie personnalisée
Voici un jsbin exemple
Cela résoudra les problèmes de css personnalisés liés au chevauchement avec les étiquettes, à l’alignement lors de l’utilisation de input-lg et à la focalisation sur la question des tabulations.
Voici une solution non-bootstrap qui simplifie votre balisage en incorporant la représentation image du glyphicon directement dans le CSS à l'aide du codage base64 URI.
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="" />
Résultat
La liste complète des caractères Unicode se trouve dans le La référence complète de l’icône Font Awesome 4.6.
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">Voici une autre façon de le faire en plaçant le glyphicon à l'aide du pseudo-élément :before en CSS.
Démo 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 compatibles 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 @Frizi l'a dit, nous devons ajouter _pointer-events: none;_ pour que le curseur n'interfère pas avec le focus en entrée. Toutes les autres règles CSS servent à centrer et à ajouter le bon espacement.
Le résultat:
Vous pouvez utiliser son code HTML Unicode
Donc, pour ajouter une icône utilisateur, ajoutez simplement  à l'attribut placeholder, ou à l'endroit souhaité.
Vous voudrez peut-être vérifier cette aide-mémoire .
Exemple:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder=" placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value=" value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value=" submit-button" style="font-family: 'Glyphicons Halflings', Arial">N'oubliez pas de définir la police de l'entrée sur celle de Glyphicon, à l'aide du code suivant:
font-family: 'Glyphicons Halflings', Arial, où Arial est la police de texte normal dans l'entrée.
Testé avec Bootstrap 4.
Prenez un form-control et ajoutez is-valid à sa classe. Notez que le contrôle devient vert, mais plus important encore, cochez l'icône en forme de coche à droite du contrôle. C'est 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>J'ai aussi 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: 
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 Bootstrap version 2. Vous pouvez voir la référence sur la page suivante: http://getbootstrap.com/2.3.2/base-css.html# images
Si vous êtes assez chanceux pour n'avoir besoin que de navigateurs modernes: essayez css transform translate. Cela ne nécessite pas de wrappers et peut être personnalisé afin de permettre un espacement plus important pour l'entrée [type = nombre] afin de loger le spinner d'entrée ou de le déplacer à 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>