Agregue Bootstrap Glyphicon al cuadro de entrada
¿Cómo puedo agregar un glifo a un cuadro de entrada de tipo texto? Por ejemplo, quiero tener 'icon-user' en una entrada de nombre de usuario, algo como esto:
Sin arranque:
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 Beard of Prey , puedes hacer esto con CSS colocando absolutamente el ícono dentro del elemento de entrada. Luego agregue relleno a cada lado para que el texto no se superponga con el ícono.
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 utilizar 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
Nota : esto supone que estás usando glifos , pero funciona igualmente bien con font-awesome .
Para FA, simplemente reemplácelo.glyphiconcon.fa
Con arranque:
Como señala Buffer , esto se puede lograr de forma nativa dentro de Bootstrap mediante el uso de estados de validación con iconos opcionales . Esto se hace dándole 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>
Ventajas :
- 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 íconos alineados a la izquierda
Para superar las desventajas, preparé esta solicitud de extracción con cambios para admitir íconos 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í tiene una guía de implementación simple:
Simplemente incluya estos cambios de formulario en CSS (también incluidos a través de un fragmento de pila oculto en la parte inferior)
*LESS : alternativamente, si está compilando a través de less , aquí están los cambios de formulario en less
Luego, todo lo que tiene que hacer es incluir la clase .has-feedback-leften cualquier grupo que tenga la clase .has-feedbackpara alinear el ícono a la izquierda.
Dado que hay muchas configuraciones HTML posibles en diferentes tipos de formularios, diferentes tamaños de control, diferentes conjuntos de íconos 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 agregar de PS Frizi
pointer-events: none;se ha agregado a bootstrap.
¿ No encontraste lo que buscabas ? Pruebe estas preguntas similares:
- Agregue el icono de Twitter Bootstrap al cuadro de entrada
- Poner el ícono de búsqueda cerca del bootstrap del cuadro de texto
CSS adicional para íconos de comentarios alineados a la izquierda
Mostrar fragmento de código
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>
DEMOSTRACIÓN: http://jsfiddle.net/yajf3b7q
Esta demostración se basa en un ejemplo de los documentos de Bootstrap. Desplácese hacia abajo hasta "Con iconos opcionales" aquí http://getbootstrap.com/css/#forms-control-validation
