Come posso aggiungere un glifo a una casella di input di tipo testo? Per esempio voglio avere 'icona-utente' in un input di nome utente, qualcosa come questo:
Arriveremo a Bootstrap in un secondo, ma ecco i concetti fondamentali di CSS in gioco per fare questo da soli. Come [beard of prey points out][beard answer], puoi farlo con i CSS posizionando assolutamente l'icona all'interno dell'elemento di input. Poi aggiungi un padding su entrambi i lati in modo che il testo non si sovrapponga all'icona. Quindi per il seguente HTML:
<input type="text" class="form-control" />
e non si tratta di un codice, ma di un codice che non ha nulla a che vedere con il codice;
Puoi usare il seguente CSS per allineare i glifi a sinistra e a destra:
/* 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
Nota: Questo presume che tu stia usando glyphicons, ma funziona altrettanto bene con font-awesome.
Per FA, basta sostituire .glyphicon
con .fa
.
con Bootstrap:
Come buffer points out, questo può essere realizzato nativamente all'interno di Bootstrap usando [Validation States with Optional Icons][validation states]. Questo viene fatto dando all'elemento .form-group
la classe di .has-feedback
e all'icona la classe di .form-control-feedback
.
L'esempio più semplice sarebbe qualcosa come questo:
Username
<input type="text" class="form-control" placeholder="Username" />
{\an8}(N.d.T.: "Il codice" è un'espressione di un'altra lingua);
**Pros**:
* Include il supporto per diversi tipi di form (Basic, Horizontal, Inline)
* Include il supporto per diverse dimensioni di controllo (Default, Small, Large)
**Cons**:
* Non include il supporto per l'allineamento delle icone a sinistra
Per superare i contro, ho messo insieme questa [pull-request][pull-request] con modifiche per supportare le icone allineate a sinistra. Poiché si tratta di un cambiamento relativamente grande, è stato rimandato ad una futura release, ma se avete bisogno di queste funzionalità **oggi**, ecco una semplice guida all'implementazione:
Basta includere il [**queste modifiche al modulo nel css**][formChangs.css] (anche inlined tramite stack snippet nascosto in basso)
***LESS**: in alternativa, se stai [costruendo tramite less][less compiler], ecco il [form changes in less][formChanges.less]
Poi, tutto quello che devi fare è includere la classe `.has-feedback-left` su ogni gruppo che ha la classe `.has-feedback` per allineare a sinistra l'icona.
Dato che ci sono molte possibili configurazioni html su diversi tipi di form, diverse dimensioni dei controlli, diversi set di icone e diverse visibilità delle etichette, ho creato una pagina di test che mostra l'insieme corretto di HTML per ogni permutazione insieme a una demo dal vivo.
## [Ecco una demo in Plunker][feedback plunker]
[![screenshot feedback][screenshot feedback]][embed feedback]
> **P.S.** Il suggerimento di [frizi's][frizi] di aggiungere `pointer-events: none;` è stato [aggiunto a bootstrap][pointer PR]
**Non hai trovato quello che cercavi**? Prova queste domande simili:
* [Aggiungi l'icona di Twitter Bootstrap alla casella di input][SO1]
* [Metti l'icona di ricerca vicino alla casella di testo bootstrap][SO2]
### Aggiunta CSS per 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;
}
Ecco un'alternativa solo CSS. L'ho impostato per un campo di ricerca per ottenere un effetto simile a Firefox (& un centinaio di altre applicazioni).
a href="
">Ecco un fiddle.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;
}
Dovresti essere in grado di farlo con le classi di bootstrap esistenti e un po' di stile personalizzato.
<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>
/form>
Modifica L'icona è referenziata tramite la classe icon-user
. Questa risposta è stata scritta all'epoca di Bootstrap versione 2. Puoi vedere il riferimento nella seguente pagina: http://getbootstrap.com/2.3.2/base-css.html#images