Aggiungi Bootstrap Glyphicon alla casella di input


340

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:

inserisci qui la descrizione dell'immagine


5
Questa è la mia soluzione alternativa (per il 2014) JSFiddle [ jsfiddle.net/rcotrina94/cyCFS/272 ]
Richard Cotrina

tardi alla festa, ma controlla la mia risposta, sto usando solo bootstrap per ottenere quell'effetto e per cambiare colore e bordo sto usando due linee di css. risolve gli altri problemi discussi nella sezione di risposta stackoverflow.com/a/40945821/2914407
Dheeraj

Risposte:


755

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

screenshot di CSS

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

screenshot di feedback

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

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

CSS aggiunta per le icone di feedback allineate a sinistra


Vedi la mia modifica, ho reso il selettore css di focalizzatoInput più esplicito, altrimenti viene sovrascritto da .input-group-addon.
Michel Müller,

@ MichelMüller, non sono sicuro di vedere il valore nella modifica suggerita. La .focusedInputclasse viene definita in seguito .input-group-addonquando i fogli di stile scendono in sequenza , questi ultimi dovrebbero avere la precedenza. Puoi descrivere meglio lo scenario che ha portato a questo essere un problema?
KyleMit,

2
Suggerisco di aggiungere "pointer-events: none;" per le icone, perché di default interferiscono con la messa a fuoco in ingresso.
Frizi,

1
@Leandro, Lo fa sicuramente! . E 'solo perché FontAwesome introdotto rompendo cambiamenti nella versione 4. Se si desidera eseguire l'aggiornamento da 3.x alla 4.x , è necessario cambiare <i class="icon-user"></i>a <i class="fa fa-user"></i>. Ogni volta che stai pensando di aggiornare le librerie esterne, assicurati di leggere le note di rilascio e la nuova documentazione per determinare se la tua app è ancora compatibile o deve essere aggiornata.
KyleMit,


62

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

inserisci qui la descrizione dell'immagine


3
+1 - Sicuramente bello avere un approccio nativo incorporato nel bootstrap. Anche se questo non fa così caldo a sinistra icone di allineamento come la domanda richiede, ma sicuramente un buon approccio.
KyleMit,

1
L'aggiunta {left:0}alla classe glyphicon dovrebbe occuparsi dell'allineamento a sinistra. jsfiddle.net/LS2Ek/30 . Mi piace il tuo approccio contorno + box-shadow. Sembra pulito!
utente

Questo è originariamente anche quello che pensavo, ma finirai per ricreare molto lavoro CSS in diverse situazioni. Se aggiungi un'etichetta , vedrai alcuni problemi . In un modulo in linea, left:0non identifica più l'inizio dell'input. Inoltre, dovrai aggiungere un'imbottitura a sinistra dell'input e rimuoverla a destra. Comunque, una soluzione molto bella e pulita. Penso che identificare la parte sinistra dell'input sia la parte difficile, dove è utile un wrapper con position:relative.
KyleMit,

È necessario aggiungere questa patch a bootstrap. È una funzione utile e di uso frequente.
utente

43

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

+1 ottima soluzione. L'ho adattato a una classe di utilità destra e sinistra, ma sicuramente l'approccio giusto
KyleMit

sì, così semplice e perfetto
PeMa,

11

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:

inserisci qui la descrizione dell'immagine


8

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

8

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

inserisci qui la descrizione dell'immagine

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

inserisci qui la descrizione dell'immagine

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.


6

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



5

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


ottimo "jugad" ma è davvero utile per impostare anche un'icona personalizzata. grazie.
Dhruv Raval,

4

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:

immagine dello schermo


2

Puoi usare il suo HTML Unicode

Quindi, per aggiungere un'icona utente, basta aggiungere &#xe008;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.


1

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: inserisci qui la descrizione dell'immagine


1

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>


0

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


0

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


Non vedendo il riferimento glyphicon del bootstrap in questa risposta
Kirby,

@Kirby, si fa riferimento all'icona tramite la classe icon-user. Questa risposta è stata scritta al momento della versione 2. di Bootstrap Puoi vedere il riferimento nella pagina seguente - getbootstrap.com/2.3.2/base-css.html#images
YOOOEE,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.