Agregar Bootstrap Glyphicon al cuadro de entrada


340

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

ingrese la descripción de la imagen aquí


55
Esta es mi solución alternativa (para 2014) JSFiddle [ jsfiddle.net/rcotrina94/cyCFS/272 ]
Richard Cotrina

tarde a la fiesta, pero mira mi respuesta, estoy usando solo bootstrap para obtener ese efecto, y para cambiar el color y el borde estoy usando dos líneas de CSS. resuelve los otros problemas que se discutieron en la sección de respuestas stackoverflow.com/a/40945821/2914407
Dheeraj

Respuestas:


755

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

captura de pantalla de css

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

captura de pantalla de comentarios

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:

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


Vea mi edición, he hecho que el selector css de focusInput sea más explícito, de lo contrario, .input-group-addon lo sobrescribe.
Michel Müller

@ MichelMüller, no estoy seguro de ver el valor en su edición sugerida. La .focusedInputclase se define después, de .input-group-addonmodo 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?
KyleMit

2
Sugiero agregar "eventos de puntero: ninguno;" para los iconos, porque de forma predeterminada interfieren con el enfoque de entrada.
Frizi

1
@Leandro, ¡seguro que sí! . Es sólo porque FontAwesome introdujo romper cambios en la Versión 4. Si desea actualizar desde 3.x a 4.x , usted tiene que cambiar <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.
KyleMit


62

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

ingrese la descripción de la imagen aquí


3
+1 - Definitivamente es bueno tener un enfoque nativo integrado en bootstrap. Aunque esto no funciona tan bien en los iconos de alineación a la izquierda, como pide la pregunta, pero definitivamente es un buen enfoque.
KyleMit

1
Agregar {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!
usuario

Originalmente, eso fue lo que pensé también, pero terminarás volviendo a crear una gran parte del trabajo de CSS en diferentes situaciones. Si agrega una etiqueta , verá algunos problemas . En un formulario en línea, left:0ya 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:relativeresulta útil un contenedor con .
KyleMit

Debe agregar este parche a bootstrap. Es una característica práctica y de uso frecuente.
usuario

43

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

+1 gran solución. Lo adapté en una clase de utilidad izquierda y derecha, pero definitivamente el enfoque correcto
KyleMit

sí, tan simple y perfecto
PeMa

11

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:

ingrese la descripción de la imagen aquí


8

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

8

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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.


6

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



5

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


gran "jugad" pero eso es realmente útil para configurar un icono personalizado también. Gracias.
Dhruv Raval

4

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:

captura de pantalla


2

Puedes usar su HTML Unicode

Así que para añadir un icono de usuario, sólo tiene que añadir &#xe008;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.


1

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: ingrese la descripción de la imagen aquí


1

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>


0

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


0

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


No veo la referencia de glifo de arranque en esta respuesta
Kirby

@ Kirby, se hace referencia al icono a través de la clase icon-user. Esta respuesta se escribió en el momento de Bootstrap versión 2. Puede ver la referencia en la página siguiente: getbootstrap.com/2.3.2/base-css.html#images
YOOOEE
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.