¿Cómo puedo agregar un glifo a un cuadro de entrada de tipo de texto? Por ejemplo, quiero tener 'icon-user' en una entrada de nombre de usuario, algo como esto:

Sin Bootstrap:

Llegaremos a Bootstrap en un segundo, pero aquí están los conceptos fundamentales de CSS en juego para hacerlo usted mismo. Como señala barba de presa , puede hacer esto con CSS colocando absolutamente el icono dentro del elemento de entrada. Luego agregue relleno a cada lado para que el texto no se superponga con el icono.

Entonces para el siguiente HTML:

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

Puede usar el siguiente CSS para alinear glifos a izquierda y derecha:

/* 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 en Plunker

Nota : Esto supone que está utilizando glifos , pero funciona igualmente bien con font-awesome .
Para FA, simplemente reemplace .glyphiconcon.fa

Con Bootstrap:

Como señala el búfer , esto se puede lograr de forma nativa dentro de Bootstrap mediante el uso de Estados de validación con iconos opcionales . Esto se hace dando al .form-groupelemento la clase de .has-feedbacky al icono la clase de .form-control-feedback.

El ejemplo más simple sería algo como esto:

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

Pros :

• Incluye soporte para diferentes tipos de formularios (Básico, Horizontal, En línea)
• Incluye soporte para diferentes tamaños de control (predeterminado, pequeño, grande)

Contras :

• No incluye soporte para iconos alineados a la izquierda

Para superar las desventajas, armé esta solicitud de extracción con cambios para admitir iconos alineados a la izquierda. Como es un cambio relativamente grande, se pospuso hasta una versión futura, pero si necesita estas características hoy , aquí hay una guía de implementación simple:

Solo incluya estos cambios de formulario en css (también en línea a través de un fragmento de pila oculto en la parte inferior)
_{* MENOS : alternativamente, si está construyendo a través de menos , aquí están los cambios de formulario en menos}

Luego, todo lo que tiene que hacer es incluir la clase .has-feedback-leften cualquier grupo que tenga la clase .has-feedbackpara alinear a la izquierda el icono.

Dado que hay muchas configuraciones html posibles para diferentes tipos de formularios, diferentes tamaños de control, diferentes conjuntos de iconos y diferentes visibilidades de etiquetas, creé una página de prueba que muestra el conjunto correcto de HTML para cada permutación junto con una demostración en vivo.

Aquí hay una demostración en Plunker

La sugerencia de PS Frizi de agregar pointer-events: none;se ha agregado a Bootstrap

¿No encontraste lo que estabas buscando ? Pruebe estas preguntas similares:

• Añadir el icono de Twitter Bootstrap al cuadro de entrada
• Poner el icono de búsqueda cerca de bootstrap de cuadro de texto

Adición de CSS para iconos de comentarios alineados a la izquierda

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

El método oficial . No se requiere CSS personalizado:

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

Esta demostración se basa en un ejemplo en los documentos de Bootstrap. Desplácese hacia abajo hasta "Con iconos opcionales" aquí http://getbootstrap.com/css/#forms-control-validation

Aquí hay una alternativa solo para CSS. Configuré esto para un campo de búsqueda para obtener un efecto similar a Firefox (y cientos de otras aplicaciones).

Aquí hay un violín .

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

Así es como lo hice usando solo el bootstrap CSS v3.3.1 predeterminado:

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

Y así es como se ve:

Este 'truco' funcionará con el efecto secundario de que la clase glyphicon cambiará la fuente para el control de entrada.

Violín

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

Si desea deshacerse del efecto secundario, puede eliminar la clase "glyphicon" y agregar el siguiente CSS (puede haber una mejor manera de diseñar el pseudo elemento marcador de posición y solo lo he probado en Chrome).

Violín

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

Posiblemente una solución aún más limpia:

Violín

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

Se puede hacer usando clases de la versión oficial de bootstrap 3.x, sin ningún CSS personalizado.

Use input-group-addonantes de la etiqueta de entrada, input-groupluego use cualquiera de los glifos, aquí está el código

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

Aquí está la salida

Para personalizarlo, agregue un par de líneas de CSS personalizado a su propio archivo custom.css (ajuste el relleno si es necesario)

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

Al hacer el fondo input-group-addontransparente y hacer que el gradiente izquierdo de la etiqueta de entrada sea cero, la entrada tendrá una apariencia perfecta. Aquí está la salida personalizada

Aquí hay un ejemplo de jsbin

Esto resolverá los problemas de css personalizados de superposición con etiquetas, alineación durante el uso input-lgy enfoque en el problema de la pestaña.

Aquí hay una solución sin bootstrap que mantiene su marcado simple al incrustar la representación de la imagen del glificón directamente en el CSS utilizando la codificación 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 está utilizando Fontawesome , puede hacer esto:

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

Resultado

La lista completa de Unicode se puede encontrar en la referencia del icono The Font Awesome 4.6.3 completa

Aquí hay otra forma de hacerlo colocando el glificón usando el :beforepseudo elemento en CSS.

Demostración de trabajo en jsFiddle

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

Use este CSS ( Bootstrap 3.xy navegadores basados ​​en 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;
}

Como dijo @Frizi, tenemos que agregar pointer-events: none;para que el cursor no interfiera con el foco de entrada. Todas las demás reglas CSS son para centrar y agregar el espaciado adecuado.

El resultado:

Puedes usar su HTML Unicode

Así que para añadir un icono de usuario, sólo tiene que añadir a laplaceholder atributo o donde lo desee.

Es posible que desee consultar esta hoja de trucos .

Ejemplo:

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

No olvide establecer la fuente de entrada en el Glyphicon, usando el siguiente código:, font-family: 'Glyphicons Halflings', Arialdonde Arial es la fuente del texto normal en la entrada.

También tengo una decisión para este 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>

En la entrada tengo algo como esto:

Probado con Bootstrap 4.

Tome un form-controly agréguelo is-valida su clase. Observe cómo el control se vuelve verde, pero lo más importante, observe el icono de marca de verificación a la derecha del control. ¡Esto es lo que queremos!

Ejemplo:

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

Si tiene la suerte de necesitar solo navegadores modernos: pruebe css transform translate. Esto no requiere envoltorios, y puede personalizarse para que pueda permitir más espacio para la entrada [tipo = número] para acomodar el control giratorio de entrada, o moverlo a la izquierda del controlador.

    @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

Debería poder hacer esto con las clases de bootstrap existentes y un poco de estilo personalizado.

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

Editar El icono se hace referencia a través de la icon-userclase. Esta respuesta se escribió en el momento de Bootstrap versión 2. Puede ver la referencia en la siguiente página: http://getbootstrap.com/2.3.2/base-css.html#images