Le officiel la méthode. Pas de CSS personnalisé

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

Démo: http://jsfiddle.net/LS2Ek/1 /

cette démo est basée sur un exemple dans Bootstrap docs. Faites défiler vers le bas jusqu'à" avec les icônes optionnelles "ici http://getbootstrap.com/css/#forms-control-validation

voici une alternative uniquement CSS. J'ai configuré ceci pour un champ de recherche pour obtenir un effet similaire à Firefox (& une centaine d'autres applications.)

voici un violon .

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

Voici comment je l'ai fait en utilisant seulement le bootstrap CSS V3 par défaut.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>

Et voici à quoi ça ressemble:

ce "cheat" fonctionnera avec l'effet secondaire que la classe glyphicon changera la police pour le contrôle d'entrée.

Violon

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

si vous voulez vous débarrasser de l'effet secondaire, vous pouvez supprimer la classe" glyphicon " et ajouter les CSS suivants (il peut y avoir une meilleure façon de style le pseudo élément placeholder et je n'ai testé que sur Chrome).

Violon

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

peut-être une solution encore plus propre:

Violon

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

il peut être fait en utilisant les classes du bootstrap officiel 3.version x, Sans CSS personnalisé.

utiliser input-group-addon avant la balise d'entrée, à l'intérieur de input-group utiliser les glyphicons, voici le code

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

Voici la sortie

pour le personnaliser plus ajouter quelques lignes de custuom css à votre propre personnaliser.fichier css (réglage du remplissage si nécessaire)

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

en rendant l'arrière-plan du input-group-addon transparent et en rendant le gradient gauche de la balise d'entrée à zéro, l'entrée aura une apparence transparente. Voici la sortie personnalisée

voici un jsbin exemple

cela résoudra le CSS personnalisé problèmes de chevauchement avec lables, alignement tout en utilisant input-lg et se concentrer sur la question tab.

Voici une solution non bootstrap qui simplifie votre balisage en intégrant la représentation d'image du glyphicon directement dans le CSS en utilisant l'encodage 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">

si vous utilisez Fontawesome vous pouvez faire ceci:

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

résultat

la liste complète de unicode peut être trouvée dans le la police complète impressionnant 4.6.3 référence d'icône

Voici une autre façon de le faire en plaçant le glyphicon en utilisant le pseudo-élément :before dans CSS.

Travail de démonstration dans jsFiddle

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

utilisez ce CSS ( Bootstrap 3.X et les navigateurs Webkit compatibles )

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

comme @Frizi L'a dit, nous devons ajouter pointer-events: none; pour que le le curseur n'interfère pas avec le focus d'entrée. Toutes les autres règles CSS sont pour le centrage et l'ajout de l'espacement approprié.

le résultat:

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

j'ai aussi une décision pour cette affaire avec 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>

sur input j'ai quelque chose comme ça:

vous pouvez utiliser son Unicode HTML

pour ajouter une icône d'utilisateur, il suffit d'ajouter  à l'attribut placeholder , ou où vous le voulez.

vous pouvez vérifier cette feuille de triche .

exemple:

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

n'oubliez pas de régler la police d'entrée sur celle de Glyphicon, en utilisant le code suivant: font-family: 'Glyphicons Halflings', Arial , où Arial est la police du texte normal dans l'entrée.

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é de sorte que vous pouvez autoriser plus d'espacement pour l'entrée[type=nombre] pour accommoder le spinner d'entrée, ou le déplacer à la gauche de la poignée.

    @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

vous devriez être en mesure de le faire avec les classes bootstrap existantes et un peu de style personnalisé.

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

Edit l'icône est référencée via la classe icon-user . Cette réponse a été écrite au moment de la version 2 de Bootstrap. Vous pouvez voir la référence sur la page suivante: http://getbootstrap.com/2.3.2/base-css.html#images