Aggiungi Bootstrap Glyphicon alla casella di input

Come posso aggiungere un glyphicon a una casella di input del tipo di testo? Ad esempio voglio avere ‘icon-user’ in un input username, qualcosa di simile a questo:

inserisci la descrizione dell'immagine qui

Senza Bootstrap:

Arriveremo a Bootstrap in un secondo, ma ecco i fondamentali concetti CSS in gioco per poterlo fare da soli. Come fa notare la barba preda , puoi farlo con i CSS posizionando l’icona all’interno dell’elemento di input. Quindi aggiungi padding su entrambi i lati in modo che il testo non si sovrapponga all’icona.

Quindi per il seguente codice HTML:

È ansible utilizzare il seguente CSS per glifi di allineamento sinistro e destro:

 /* 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; } 

Demo in Plunker

screenshot css

Nota : questo presume che stai usando i glyphicon , ma funziona ugualmente bene con font-awesome .
Per FA, basta sostituire .glyphicon con .fa


Con Bootstrap:

Come indicato dal buffer , questo può essere eseguito in modo nativo all’interno di Bootstrap usando gli stati di convalida con icone opzionali . Questo viene fatto dando .form-group la class di .has-feedback e l’icona la class di .form-control-feedback .

L’esempio più semplice sarebbe qualcosa del genere:

 

Pro :

  • Include supporto per diversi tipi di moduli (Base, Orizzontale, In linea)
  • Include supporto per diverse dimensioni di controllo (Predefinito, Piccolo, Grande)

Contro :

  • Non include il supporto per le icone di allineamento a sinistra

Per superare gli svantaggi, ho messo insieme questa richiesta di pull con le modifiche per supportare le icone allineate a sinistra. Poiché si tratta di un cambiamento relativamente grande, è stato rimandato a una versione futura, ma se hai bisogno di queste funzionalità oggi , ecco una semplice guida all’implementazione:

Basta includere le modifiche al modulo in css (anche inline tramite lo snippet di stack nascosto in basso)
* MENO : in alternativa, se stai costruendo via meno , ecco le modifiche al modulo in meno

Quindi, tutto ciò che devi fare è includere la class .has-feedback-left su qualsiasi gruppo che abbia la class .has-feedback per allineare l’icona.

Dal momento che ci sono molte configurazioni html possibili su diversi tipi di moduli, diverse dimensioni di controllo, diversi set di icone e diverse visibilita ‘delle etichette, ho creato una pagina di test che mostra il corretto set di HTML per ogni permutazione insieme a una demo live.

Ecco una demo in Plunker

screenshot di feedback

Il suggerimento di PS frizi di aggiungere pointer-events: none; è stato aggiunto al bootstrap

Non hai trovato quello che stavi cercando ? Prova queste domande simili:

  • Aggiungi l’icona di Bootstrap di Twitter alla casella di input
  • Metti l’icona di ricerca vicino al bootstrap della casella di testo

Addizione CSS per le icone di feedback allineate a sinistra

 .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; } 

Il metodo ufficiale Nessun CSS personalizzato richiesto:

 

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

Questa demo è basata su un esempio di documenti Bootstrap. Scorri verso il basso fino a “Con icone opzionali” qui http://getbootstrap.com/css/#forms-control-validation

inserisci la descrizione dell'immagine qui

Ecco un’alternativa solo CSS. Ho impostato questo per un campo di ricerca per ottenere un effetto simile a Firefox (e un centinaio di altre app).

Ecco un violino .

HTML

 

CSS

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

Ecco come l’ho fatto usando solo il default bootstrap CSS v3.3.1:

 

E questo è come appare:

inserisci la descrizione dell'immagine qui

Questo ‘cheat’ funzionerà con l’effetto collaterale che la class glyphicon cambierà il font per il controllo di input.

Violino

  

Se vuoi eliminare l’effetto collaterale puoi rimuovere la class “glyphicon” e aggiungere il seguente CSS (potrebbe esserci un modo migliore per modellare lo pseudo elemento segnaposto e ho provato solo su Chrome).

Violino

 .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"; } 

Forse una soluzione ancora più pulita:

Violino

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

    

Può essere fatto usando le classi dalla versione ufficiale di bootstrap 3.x, senza css personalizzati.

usa input-group-addon prima del tag input, all’interno di input-group quindi usa uno qualsiasi dei glyphicon, ecco il codice

 

Ecco l’output

inserisci la descrizione dell'immagine qui

Per personalizzare ulteriormente aggiungi un paio di righe di custuom css al tuo file custom.css (modifica il padding se necessario)

 .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); } 

Rendendo trasparente lo sfondo del componente input-group-addon e rendendo il gradiente sinistro del tag di input a zero, l’input avrà un aspetto uniforms. Ecco l’output personalizzato

inserisci la descrizione dell'immagine qui

Ecco un esempio jsbin

Ciò risolverà i problemi di css personalizzati di sovrapposizione con etichette, l’allineamento durante l’utilizzo di input-lg e l’attenzione al problema delle tabs.

Ecco una soluzione non bootstrap che semplifica il markup incorporando la rappresentazione dell’immagine del glyphicon direttamente nel CSS usando la codifica 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=); } 
  

Se stai usando Fontawesome puoi farlo:

  

Risultato

inserisci la descrizione dell'immagine qui

L’elenco completo di unicode è disponibile nel Riferimento completo di Font Awesome 4.6.3

Ecco un altro modo per farlo posizionando il glyphicon usando l’elemento :before pseudo in CSS.

Demo di lavoro in jsFiddle

Per questo HTML:

 

Usa questo CSS ( compatibile con Bootstrap 3.xe browser basati su 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; } 

Come ha detto @Frizi, dobbiamo aggiungere pointer-events: none; in modo che il cursore non interferisca con il fuoco di input. Tutte le altre regole CSS sono per il centraggio e l’aggiunta della spaziatura corretta.

Il risultato:

immagine dello schermo

 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=); } 
  

Ho anche una decisione per questo caso con Bootstrap 3.3.5:

 

In ingresso ho qualcosa di simile a questo: inserisci la descrizione dell'immagine qui

Puoi usare il suo HTML Unicode

Quindi per aggiungere un’icona utente, aggiungi all’attributo placeholder o ovunque lo desideri.

Potresti voler controllare questo cheat sheet .

Esempio:

     

Se sei abbastanza fortunato da aver bisogno solo di browser moderni: prova css trasformare translate. Ciò non richiede wrapper e può essere personalizzato in modo da consentire una maggiore spaziatura per l’input [tipo = numero] per accogliere lo spinner di input o spostarlo a sinistra del manico.

  @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%); } 

Tasty Field Validation Icons using only css transform

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

Dovresti riuscire a farlo con le classi di bootstrap esistenti e un po ‘di stile personalizzato.

 

Modifica L’icona è referenziata tramite la class icon-user . Questa risposta è stata scritta al momento della versione Bootstrap 2. Puoi vedere il riferimento nella pagina seguente: http://getbootstrap.com/2.3.2/base-css.html#images