Agregue Bootstrap Glyphicon a la caja de entrada

¿Cómo puedo agregar un glyphicon 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:

enter image description here

Sin Bootstrap:

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

Entonces para el siguiente HTML:

Puede usar el siguiente CSS para alinear glifos a la izquierda y a la 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; } 

Demostración en Plunker

captura de pantalla css

Nota : Esto supone que estás usando glyphicons , pero funciona igual de bien con font-awesome .
Para FA, simplemente reemplace .glyphicon con .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 icons opcionales . Esto se hace dando al elemento .form-group la clase de .has-feedback y al icono la clase de .form-control-feedback .

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

 

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 los icons de alineación izquierda

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

Solo incluya los cambios en estos formularios en CSS (también en línea a través del fragmento oculto de la stack en la parte inferior)
* MENOS : alternativamente, si está construyendo por menos , aquí está la forma cambia en menos

Entonces, todo lo que tiene que hacer es incluir la clase .has-feedback-left en cualquier grupo que tenga la clase .has-feedback para alinear el icono a la izquierda.

Dado que hay muchas configuraciones html posibles en diferentes tipos de formularios, diferentes tamaños de control, diferentes conjuntos de icons y diferentes visibilidades de tags, 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

captura de pantalla de comentarios

Sugerencia de PS frizi de agregar pointer-events: none; ha sido agregado a bootstrap

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

  • Agregar el icono Twitter Bootstrap al cuadro de entrada
  • Poner el icono de búsqueda cerca de la rutina de arranque del cuadro de texto

Adición de CSS para los icons de retroalimentación 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:

 

DEMO: http://jsfiddle.net/LS2Ek/1/

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

enter image description here

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

Aquí hay un violín .

HTML

 

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:

 

Y así es como se ve:

enter image description here

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

Violín

  

Si quieres deshacerte del efecto secundario, puedes eliminar la clase “glyphicon” y agregar el siguiente CSS (puede que haya una mejor manera de darle estilo al pseudo elemento de 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

    

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

use input-group-addon antes de la etiqueta de entrada, dentro de input-group luego use cualquiera de los glyphicons, aquí está el código

 

Aquí está la salida

enter image description here

Para personalizarlo, agregue un par de líneas de custuom css 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 que el fondo del input-group-addon transparente y hacer que el gradiente izquierdo de la etiqueta de entrada sea cero, la entrada tendrá una apariencia uniforme. Aquí está la salida personalizada

enter image description here

Aquí hay un ejemplo jsbin

Esto resolverá los problemas de CSS personalizados de superposición con tags, alineación al usar input-lg y se centrará en el problema de tabulación.

Aquí hay una solución que no es un bootstrap que mantiene su marcaje simple al incrustar la representación de la imagen del glyphicon directamente en el CSS usando la encoding URI de 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=); } 
  

Si está utilizando Fontawesome puede hacer esto:

  

Resultado

enter image description here

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

Aquí hay otra forma de hacerlo colocando el glyphicon usando :before pseudo element en CSS.

Demostración de trabajo en jsFiddle

Para este HTML:

 

Utilice este CSS ( compatible con Bootstrap 3.x y navegadores basados ​​en 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; } 

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

El resultado:

captura de pantalla

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

También tengo una decisión para este caso con Bootstrap 3.3.5:

 

En entrada, tengo algo como esto: enter image description here

Puedes usar su HTML Unicode

Entonces, para agregar un ícono de usuario, simplemente agregue al atributo placeholder , o donde lo desee.

Es posible que desee comprobar esta hoja de trucos .

Ejemplo:

     

Si tiene la suerte de necesitar navegadores modernos: intente traducir css transform. Esto no requiere envoltorios, y se puede personalizar 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 control.

  @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%); } 

Tasty Field Validation Icons using only css transform

http://codepen.io/anon/pen/RPRmNq?editors=110

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

 

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