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:
css
twitter-bootstrap
glyphicons
relooking
la source
la source
Réponses:
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:
Vous pouvez utiliser le CSS suivant pour aligner les glyphes à gauche et à droite:
Démo dans Plunker
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-feedback
et à l'icône la classe de.form-control-feedback
.L'exemple le plus simple serait quelque chose comme ceci:
Avantages :
Inconvénients :
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-left
dans n'importe quel groupe qui a la classe.has-feedback
afin 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
Vous n'avez pas trouvé ce que vous cherchiez ? Essayez ces questions similaires:
Ajout de CSS pour les icônes de rétroaction alignées à gauche
Afficher l'extrait de code
la source
.focusedInput
classe est définie après,.input-group-addon
donc lorsque la feuille de style tombe en cascade , ces derniers styles doivent avoir la priorité. Pouvez-vous mieux décrire le scénario qui a conduit à ce problème?<i class="icon-user"></i>
à<i class="fa fa-user"></i>
. Chaque fois que vous songez à mettre à jour des bibliothèques externes, assurez-vous de lire les notes de publication et la nouvelle documentation pour déterminer si votre application est toujours compatible ou doit être mise à niveau.La méthode officielle . Aucun CSS personnalisé requis:
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
la source
{left:0}
à la classe glyphicon devrait prendre soin de l'alignement à gauche. jsfiddle.net/LS2Ek/30 . J'aime bien votre approche contour + boîte-ombre. Ça a l'air bien!left:0
n'identifie plus le début de l'entrée. Vous devrez également ajouter un remplissage à gauche de l'entrée et le supprimer à droite. Pourtant, une solution très agréable et propre. Je pense que l'identification de la gauche de l'entrée est la partie difficile, c'est là qu'un wrapperposition:relative
est utile.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
CSS
la source
Voici comment je l'ai fait en utilisant uniquement le bootstrap CSS v3.3.1 par défaut:
Et voici à quoi ça ressemble:
la source
Cette «triche» fonctionnera avec l'effet secondaire que la classe de glyphicon changera la police pour le contrôle d'entrée.
Violon
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
Peut-être une solution encore plus propre:
Violon
CSS
HTML
la source
Cela peut être fait en utilisant des classes de la version officielle de bootstrap 3.x, sans CSS personnalisé.
Utilisez
input-group-addon
avant la balise d'entrée, à l'intérieurinput-group
puis utilisez l'un des glyphicons, voici le codeVoici la sortie
Pour le personnaliser, ajoutez quelques lignes de CSS personnalisées à votre propre fichier custom.css (ajustez le remplissage si nécessaire)
En rendant l'arrière-plan du
input-group-addon
transparent 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éeVoici 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-lg
et de se concentrer sur le problème des onglets.la source
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.
la source
Si vous utilisez Fontawesome, vous pouvez le faire:
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
la source
la source
Voici une autre façon de le faire en plaçant le glyphicon à l'aide du
:before
pseudo-élément en CSS.Démonstration de travail dans jsFiddle
Pour ce HTML:
Utilisez ce CSS ( Bootstrap 3.x et navigateurs Webkit compatibles )
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:
la source
Vous pouvez utiliser son HTML Unicode
Donc, pour ajouter une icône d'utilisateur, ajoutez simplement

à l'placeholder
attribut, ou où vous le souhaitez.Vous voudrez peut-être vérifier cette feuille de triche .
Exemple:
la source
J'ai également une décision pour ce cas avec Bootstrap 3.3.5:
En entrée, j'ai quelque chose comme ceci:
la source
Testé avec Bootstrap 4.
Prenez un
form-control
et ajoutezis-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:
la source
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.
http://codepen.io/anon/pen/RPRmNq?editors=110
la source
Vous devriez pouvoir le faire avec les classes d'amorçage existantes et un peu de style personnalisé.
Modifier L'icône est référencée via la
icon-user
classe. 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#imagesla source