Metoda Oficjalna . Nie wymaga niestandardowego CSS:

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

To demo jest oparte na przykładzie w dokumentach Bootstrap. Przewiń w dół do pozycji "z opcjonalnymi ikonami" http://getbootstrap.com/css/#forms-control-validation

Oto alternatywa tylko dla CSS. Skonfigurowałem to dla pola wyszukiwania, aby uzyskać efekt podobny do Firefoksa (i stu innych aplikacji.)

Oto skrzypce .

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

Oto Jak to zrobiłem używając tylko domyślnego Bootstrap CSS 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>

I tak to wygląda:

Ten 'cheat' będzie działał z efektem ubocznym, że Klasa gliphicon zmieni czcionkę dla kontrolki wejściowej.

Fiddle

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

Jeśli chcesz pozbyć się efektu ubocznego, możesz usunąć klasę "gliphicon" i dodać następujący CSS(może być lepszy sposób na stylizację pseudo elementu zastępczego i testowałem tylko na Chrome).

Fiddle

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

Być może nawet czyściciel rozwiązanie:

Fiddle

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

Można to zrobić za pomocą klas z oficjalnego bootstrap 3.wersja x, bez żadnych niestandardowych css.

Użyj input-group-addon przed znacznikiem wejściowym, wewnątrz input-group, a następnie użyj dowolnego z gliphiconów, oto kod

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

Oto wyjście

Aby dostosować go dalej dodać kilka linii custuom css do własnego niestandardowego.css file (adjust padding if needed)

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

Poprzez uczynienie tła input-group-addon przezroczystym i uczynienie lewego gradient znacznika wejściowego do zera wejście będzie miało płynny wygląd. Oto niestandardowe wyjście

Oto przykład jsbin

Rozwiąże to niestandardowe problemy css polegające na nakładaniu się etykiet, wyrównywaniu podczas używania Input-lg i skupianiu się na problemie z zakładką.

Oto rozwiązanie non-bootstrap, które utrzymuje twoje znaczniki proste poprzez osadzenie reprezentacji obrazu gliphiconu bezpośrednio w CSS za pomocą kodowania 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">

Jeśli używasz Fontawesome możesz to zrobić:

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

Result

Pełna lista unicode znajduje się w pełna czcionka Awesome 4.6.3 icon reference

Oto inny sposób, aby to zrobić, umieszczając gliphicon za pomocą :before pseudo element w CSS.

Praca demo w jsFiddle

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

Użyj tego CSS (Bootstrap 3.x i Webkit kompatybilny z przeglądarkami )

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

Jak powiedział @ Frizi, musimy dodać pointer-events: none;, aby kursor nie zakłócał ostrości wejściowej. Wszystkie pozostałe reguły CSS służą do centrowania i dodawania odpowiednich odstępów.

The wynik:

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

Mam też jedną decyzję w tej sprawie z 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>

Na wejściu mam coś takiego:

Możesz użyć jego Unicode HTML

Aby dodać ikonę użytkownika, po prostu dodaj {[1] } do atrybutu placeholder, lub gdziekolwiek chcesz.

Możesz sprawdzić Ten ściągacz.

Przykład:

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

Nie zapomnij ustawić czcionki wejścia na Gliphicon, używając następujący kod: font-family: 'Glyphicons Halflings', Arial, gdzie Arial jest czcionką zwykłego tekstu na wejściu.

Jeśli masz szczęście, że potrzebujesz tylko nowoczesnych przeglądarek: wypróbuj css transform translate. Nie wymaga to owijania i można go dostosować tak, aby można było zezwolić na większe odstępy dla wejścia [type=number], aby pomieścić spinner wejściowy lub przesunąć go na lewo od uchwytu.

    @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

Powinieneś być w stanie to zrobić z istniejącymi klasami bootstrap i odrobiną niestandardowej stylizacji.

<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 do ikony odwołuje się klasa icon-user. Odpowiedź ta została napisana w czasie Bootstrap w wersji 2. Możesz zobaczyć odniesienie na następującej stronie: http://getbootstrap.com/2.3.2/base-css.html#images