¿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:
¿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:
Respuestas:
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; }
Nota : Esto supone que está utilizando glifos , pero funciona igualmente bien con font-awesome .
Para FA, simplemente reemplace.glyphicon
con.fa
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-group
elemento la clase de .has-feedback
y 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 :
Contras :
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-left
en cualquier grupo que tenga la clase .has-feedback
para 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.
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:
.focusedInput
clase se define después, de .input-group-addon
modo que cuando las hojas de estilo caen en cascada , los últimos estilos deben tener prioridad. ¿Puedes describir mejor el escenario que llevó a que esto sea un problema?
<i class="icon-user"></i>
a <i class="fa fa-user"></i>
. Cada vez que esté pensando en actualizar bibliotecas externas, asegúrese de leer las notas de la versión y la nueva documentación para determinar si su aplicación aún es compatible o necesita actualizarse.
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
{left:0}
a la clase glyphicon debe ocuparse de la alineación izquierda. jsfiddle.net/LS2Ek/30 . Sin embargo, me gusta su enfoque de esquema + sombra de cuadro. Se ve bien!
left:0
ya no identifica el inicio de la entrada. También deberá agregar relleno a la izquierda de la entrada y eliminarlo a la derecha. Aún así, una solución muy agradable y limpia. Creo que identificar la izquierda de la entrada es la parte difícil, que es donde position:relative
resulta útil un contenedor con .
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).
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.
<input class="form-control glyphicon" type="search" placeholder=""/>
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).
.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:
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=" search" />
<input class="form-control glyphicon" type="text" placeholder=" username" />
<input class="form-control glyphicon" type="password" placeholder=" password" />
Se puede hacer usando clases de la versión oficial de bootstrap 3.x, sin ningún CSS personalizado.
Use input-group-addon
antes de la etiqueta de entrada, input-group
luego 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-addon
transparente 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-lg
y 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="" />
Resultado
La lista completa de Unicode se puede encontrar en la referencia del icono The Font Awesome 4.6.3 completa
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">
Aquí hay otra forma de hacerlo colocando el glificón usando el :before
pseudo elemento en CSS.
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:
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=" placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value=" value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value=" 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', Arial
donde 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>
Tome un form-control
y agréguelo is-valid
a 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>
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-user
clase. 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