Come posso aggiungere un glifo a una casella di input del tipo di testo? Ad esempio, voglio avere "icon-user" nell'input di un nome utente, qualcosa del genere:

Senza Bootstrap:

Arriveremo a Bootstrap tra un secondo, ma ecco i concetti CSS fondamentali in gioco per farlo da soli. Come sottolinea la barba della preda , puoi farlo con i CSS posizionando assolutamente l'icona all'interno dell'elemento di input. Quindi aggiungi un'imbottitura su entrambi i lati in modo che il testo non si sovrapponga all'icona.

Quindi per il seguente HTML:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

È possibile utilizzare i seguenti CSS per allineare i glifi a destra e a sinistra:

/* 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 presuppone che tu stia usando i glyphylons , ma funziona ugualmente bene con font-awesome .
Per FA, basta sostituire .glyphiconcon.fa

Con Bootstrap:

Come sottolineato dal buffer , ciò può essere realizzato in modo nativo all'interno di Bootstrap utilizzando Stati di convalida con icone opzionali . Questo viene fatto dando .form-groupall'elemento la classe di .has-feedbacke l'icona alla classe di .form-control-feedback.

L'esempio più semplice sarebbe qualcosa del genere:

<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>

Pro :

• Include supporto per diversi tipi di modulo (base, orizzontale, in linea)
• Include supporto per diverse dimensioni di controllo (impostazione predefinita, piccola, grande)

Contro :

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

Per superare i contro, ho messo insieme questa richiesta pull con modifiche per supportare le icone allineate a sinistra. Poiché si tratta di una modifica relativamente grande, è stata rimandata a una versione futura, ma se hai bisogno di queste funzionalità oggi , ecco una semplice guida all'implementazione:

Includi solo queste modifiche al modulo in CSS (anche inline tramite snippet di stack nascosto nella parte inferiore)
_{* MENO : in alternativa, se stai costruendo via less , ecco le modifiche al modulo in less}

Quindi, tutto ciò che devi fare è includere la classe .has-feedback-leftsu qualsiasi gruppo che ha la classe .has-feedbackper allineare a sinistra l'icona.

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

Ecco una demo in Plunker

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

Non hai trovato quello che cercavi ? Prova queste domande simili:

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

CSS aggiunta 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:

<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/

Questa demo si basa su un esempio nei documenti Bootstrap. Scorri verso il basso fino a "Con icone opzionali" qui http://getbootstrap.com/css/#forms-control-validation

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

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

Ecco come l'ho fatto usando solo il bootstrap CSS predefinito 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>

Ed ecco come appare:

Questo 'cheat' funzionerà con l'effetto collaterale che la classe glyphicon cambierà il font per il controllo di input.

Violino

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

Se vuoi sbarazzarti dell'effetto collaterale puoi rimuovere la classe "glyphicon" e aggiungere il seguente CSS (Potrebbe esserci un modo migliore per dare uno stile allo pseudo elemento segnaposto e ho testato 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

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />

Può essere fatto usando le classi dalla versione 3.x ufficiale di bootstrap, senza alcun CSS personalizzato.

Utilizzare input-group-addonprima del tag di input, all'interno di input-groupquindi utilizzare uno qualsiasi dei glifi, ecco il codice

<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>

Ecco l'output

Per personalizzarlo, aggiungi un paio di righe di css personalizzate al tuo file custom.css (regola il riempimento 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 lo sfondo del input-group-addontrasparente e portando a zero il gradiente sinistro del tag di input, l'input avrà un aspetto uniforme. Ecco l'output personalizzato

Ecco un esempio di jsbin

Questo risolverà i problemi di css personalizzati di sovrapposizione con etichette, allineamento durante l'utilizzo input-lge attenzione al problema delle schede.

Ecco una soluzione non bootstrap che semplifica il markup incorporando la rappresentazione dell'immagine del glifo 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=);
}

<input class="search">

Se stai usando Fontawesome puoi farlo:

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

Risultato

L'elenco completo di Unicode è disponibile nel riferimento completo dell'icona The Font Awesome 4.6.3

Ecco un altro modo per farlo posizionando il glyphicon usando lo :beforepseudo elemento nei CSS.

Demo funzionante in jsFiddle

Per questo 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>

Usa questo CSS ( compatibile con i browser basati su Bootstrap 3.xe 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 in pointer-events: none;modo che il cursore non interferisca con il focus di input. Tutte le altre regole CSS servono per centrare e aggiungere la spaziatura corretta.

Il risultato:

Puoi usare il suo HTML Unicode

Quindi, per aggiungere un'icona utente, basta aggiungere l' placeholderattributo o dove lo si desidera.

Potresti voler controllare questo cheat sheet .

Esempio:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

Non dimenticare di impostare il carattere dell'input su Glyphicon, usando il seguente codice :,font-family: 'Glyphicons Halflings', Arial dove Arial è il carattere del testo normale nell'input.

Ho anche una decisione per questo caso con 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>

All'ingresso ho qualcosa del genere:

Testato con Bootstrap 4.

Prendi a form-controle aggiungi is-validalla sua classe. Notare come il controllo diventa verde, ma, cosa più importante, notare l'icona del segno di spunta sulla destra del controllo? Questo è ciò che vogliamo!

Esempio:

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

Se sei abbastanza fortunato da aver bisogno solo di browser moderni: prova css transform translate translate. Ciò non richiede wrapper e può essere personalizzato in modo da consentire più spazio per l'input [tipo = numero] per accogliere lo spinner di input o spostarlo a sinistra della maniglia.

    @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>

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

Dovresti essere in grado di farlo con le classi 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>         

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