на официальный метод. Не требуется пользовательский 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>

демо:http://jsfiddle.net/LS2Ek/1/

эта демонстрация основана на примере в Bootstrap docs. Прокрутите вниз до "с дополнительными значками:" здесь http://getbootstrap.com/css/#forms-control-validation

вот альтернатива только для CSS. Я установил это для поля поиска, чтобы получить эффект, подобный Firefox (и сотне других приложений.)

вот скрипка.

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

вот как я это сделал, используя только загрузочный 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>

и вот как это выглядит:

этот " чит " будет работать с побочным эффектом, что класс glyphicon изменит шрифт для входного элемента управления.

Скрипка

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

если вы хотите избавиться от побочного эффекта, вы можете удалить класс "glyphicon" и добавить следующий CSS (может быть лучший способ стилизовать псевдо-элемент-заполнитель, и я тестировал только на Chrome).

Скрипка

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

возможно, даже чище решение:

Скрипка

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

Это можно сделать с помощью классов из официального bootstrap 3.X версия, без каких-либо пользовательских css.

использовать input-group-addon до тега input, внутри input-group затем использовать любые технологии glyphicons, вот код

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

вот вывод

чтобы настроить его, добавьте пару строк custuom css в свой собственный обычай.css-файл (при необходимости отрегулируйте заполнение)

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

сделав фон input-group-addon прозрачный и делает левый градиент входного тега нулевым, вход будет иметь бесшовный внешний вид. Вот настроенный вывод

вот jsbin пример

это решит пользовательские проблемы css перекрытия с этикетками, выравнивания при использовании ввода-lg и сосредоточиться на проблеме вкладки.

вот решение без начальной загрузки, которое сохраняет вашу разметку простой, встраивая представление изображения глификона непосредственно в CSS, используя кодировку 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">

Если вы используете Fontawesome можно сделать так :

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

результат

полный список unicode можно найти в полный шрифт Awesome 4.6.3 значок ссылки

вот еще один способ сделать это, поместив glyphicon с помощью :before псевдоэлемент в CSS.

рабочая демонстрация в jsFiddle

для этого 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>

используйте этот CSS (Bootstrap 3.X и 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;
}

как сказал @Frizi, мы должны добавить pointer-events: none; чтобы курсор не мешал входному фокусу. Все остальные правила CSS предназначены для центрирования и добавление правильного интервала.

результат:

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

У меня тоже есть одно решение для этого случая с 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>

на входе у меня что-то вроде этого:

вы можете использовать его Unicode HTML

так, чтобы добавить значок пользователя, просто добавьте  до , или где вы хотите его.

вы можете проверить эту шпаргалку.

пример:

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

не забудьте установить шрифт вход в Glyphicon, используя следующий код: font-family: 'Glyphicons Halflings', Arial, где Ариал шрифт обычного текста вход.

Если вам посчастливилось использовать только современные браузеры: попробуйте CSS transform translate. Это не требует обертки и может быть настроено так, чтобы вы могли разрешить больше интервалов для ввода[type=number], чтобы разместить входной счетчик или переместить его влево от ручки.

    @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

вы должны быть в состоянии сделать это с существующими классов начальной загрузки и немного нестандартный стиль.

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

редактировать значок ссылки через icon-user класса. Этот ответ был написан во время Bootstrap версии 2. Вы можете увидеть ссылку на следующей странице:http://getbootstrap.com/2.3.2/base-css.html#images