css - glyphicon bootstrap 3
Añadir Bootstrap Glyphicon al cuadro de entrada (14)
¿Cómo puedo agregar un glyphicon a un cuadro de entrada de tipo de texto? Por ejemplo, quiero tener ''usuario-icono'' 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 hacer esto usted mismo. Como señala la barba de presas , puedes hacer esto con CSS posicionando absolutamente el icono dentro del elemento de entrada. Luego, agregue relleno a cada lado para que el texto no se superponga con el icono.
Así que para el siguiente HTML:
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-user"></i>
<input type="text" class="form-control" />
</div>
Puedes usar los siguientes CSS para alinear los glifos a la izquierda y 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 glyphicons , pero funciona igual de 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 usando los estados de validación con iconos opcionales . Esto se hace dando al elemento .form-group la clase de .has-feedback y el 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, Inline)
- Incluye soporte para diferentes tamaños de control (Predeterminado, Pequeño, Grande)
Contras :
- No incluye soporte para alinear a la izquierda los iconos.
Para superar los inconvenientes, armé esta pull-request con cambios para admitir iconos alineados a la izquierda. Como es un cambio relativamente grande, se ha pospuesto 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 en línea a través del fragmento de pila oculto en la parte inferior)
* MENOS : alternativamente, si está construyendo a través de menos , aquí está la forma cambia 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 el icono a la izquierda.
Dado que existen muchas configuraciones html posibles en 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;ha sido añadido a bootstrap
¿No encontraste lo que estabas buscando ? Pruebe estas preguntas similares:
- Agregar el icono de Twitter Bootstrap al cuadro de entrada
- Poner el icono de búsqueda cerca de la casilla de texto.
CSS adicional para los 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;
}
Puedes usar su HTML Unicode.
Entonces, para agregar un ícono de usuario, simplemente agregue  al atributo de placeholder , o donde lo desee.
Es posible que desee comprobar 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 configurar la fuente de la entrada en Glyphicon, usando el siguiente código:
font-family: ''Glyphicons Halflings'', Arial, donde Arial es la fuente del texto regular en la entrada.
Aquí es cómo lo hice usando solo el bootstrap predeterminado 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>
Y así es como se ve:
Aquí hay otra manera de hacerlo colocando el glyphicon usando el :before pseudo elemento en CSS.
Demo 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>
Utilice este CSS ( Bootstrap 3.x y 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 enfoque de entrada. Todas las demás reglas de CSS son para centrar y agregar el espacio adecuado.
El resultado:
Aquí hay una alternativa solo para CSS. Configuré esto para un campo de búsqueda para obtener un efecto similar a Firefox (y otras cien 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;
}
Aquí hay una solución que no es bootstrap que mantiene su marca simple al incrustar la representación de la imagen del glyphicon directamente en el CSS usando 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">
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 Se hace referencia al icon-user 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 siguiente página: http://getbootstrap.com/2.3.2/base-css.html#images
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 documentos de Bootstrap. Desplácese hacia abajo hasta "Con iconos opcionales" aquí http://getbootstrap.com/css/#forms-control-validation
Este ''truco'' funcionará con el efecto secundario de que la clase de 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 del 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, dentro de 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 aún más, agregue un par de líneas de custodia 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 transparente el fondo de la input-group-addon y hacer que el gradiente izquierdo de la etiqueta de entrada a cero, la entrada tendrá una apariencia perfecta. Aquí está la salida personalizada
Aquí hay un example jsbin.
Esto resolverá los problemas de CSS personalizados de superponer con lables, alineación mientras se usa input-lg y se enfoca en el problema de las pestañas.
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 completa del icono de Font Awesome 4.6.3
Si tiene la suerte de solo necesitar navegadores modernos: intente css transform translate. Esto no requiere envoltorios, y se puede personalizar para que pueda permitir más espacio para que la entrada [tipo = número] se acomode al control de entrada, o muévala 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>
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">