Agregar icono de Bootstrap de Twitter al cuadro de entrada
¿Cómo podemos agregar un icono de Twitter Bootstrap icon-search
a la derecha de un elemento de entrada de texto?
El siguiente intento colocó todos los iconos dentro del elemento de entrada, ¿cómo podemos recortarlo para que solo muestre el icono de icon-search
?
Intento Actual
CSS
input.search-box {
width: 180px;
background: #333;
background-image: url('/img/glyphicons-halflings-white.png');
background-position: -48px 0;
padding-left: 30px;
margin-top: 45px;
border: 0;
float: right;
}
5 answers
Bootstrap actualizado 3.x
Puede utilizar el .input-group
la clase como esta:
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
Demostración de trabajo en jsFiddle para 3.x
Bootstrap 2.x
Puede utilizar el .input-append
la clase como esta:
<div class="input-append">
<input class="span2" type="text">
<button type="submit" class="btn">
<i class="icon-search"></i>
</button>
</div>
Demostración de trabajo en jsFiddle para 2.x
Ambos se verán así:
Si quieres el icono dentro de el cuadro de entrada, como esto:
A continuación, ver mi respuesta a Añadir un Glyphicon Bootstrap a la caja de entrada
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:26:32
Dado que la imagen de glyphicons es un sprite, realmente no puedes hacer eso: fundamentalmente lo que quieres es limitar el tamaño del fondo, pero no hay forma de especificar qué tan grande es el fondo. O bien recortas el icono que quieres, lo redimensionas y lo usas, o usas algo como el campo de entrada prepend / append opción ( http://twitter.github.io/bootstrap/base-css.html#forms y luego buscar entradas antepuestas).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-01 17:41:35
Bootstrap 4.x con 3 maneras diferentes.
-
Icono con estilo de arranque predeterminado
<div class="input-group"> <input type="text" class="form-control" placeholder="From" aria-label="from" aria-describedby="from"> <div class="input-group-append"> <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span> </div> </div>
-
Icono Dentro de la entrada con la clase bootstrap predeterminada
<div class="input-group"> <input type="text" class="form-control border-right-0" placeholder="From" aria-label="from" aria-describedby="from"> <div class="input-group-append"> <span class="input-group-text bg-transparent"><i class="fas fa-map-marker-alt"></i></span> </div> </div>
-
Icono Dentro de la entrada con css personalizado pequeño
<div class="input-group"> <input type="text" class="form-control rounded-right" placeholder="From" aria-label="from" aria-describedby="from"> <span class="icon-inside"><i class="fas fa-map-marker-alt"></i></span> </div>
Css personalizado
.icon-inside { position: absolute; right: 10px; top: calc(50% - 12px); pointer-events: none; font-size: 16px; font-size: 1.125rem; color: #c4c3c3; z-index:3; }
.icon-inside {
position: absolute;
right: 10px;
top: calc(50% - 12px);
pointer-events: none;
font-size: 16px;
font-size: 1.125rem;
color: #c4c3c3;
z-index:3;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<div class="container">
<h5 class="mt-3">Icon <small>with default bootstrap Style</small><h5>
<div class="input-group">
<input type="text" class="form-control" placeholder="From" aria-label="from" aria-describedby="from">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
</div>
</div>
<h5 class="mt-3">Icon Inside Input <small>with default bootstrap class</small><h5>
<div class="input-group">
<input type="text" class="form-control border-right-0" placeholder="From" aria-label="from" aria-describedby="from">
<div class="input-group-append">
<span class="input-group-text bg-transparent"><i class="fas fa-map-marker-alt"></i></span>
</div>
</div>
<h5 class="mt-3">Icon Inside Input<small> with small custom css</small><h5>
<div class="input-group">
<input type="text" class="form-control rounded-right" placeholder="From" aria-label="from" aria-describedby="from">
<span class="icon-inside"><i class="fas fa-map-marker-alt"></i></span>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-19 06:10:37
Para bootstrap 4
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<input class="form-control" type="search" placeholder="Search">
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-search"></i></div>
</div>
</div>
</form>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-19 00:47:47
Bootstrap 4.x
Con Bootstrap 4 (y Fuente Impresionante), todavía se puede utilizar el input-group
envoltura alrededor de nuestro form-control
elemento, y ahora podemos utilizar un input-group-append
(o input-group-prepend
) contenedor con un input-group-text
para conseguir el trabajo hecho:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="my-search">
<div class="input-group-append">
<span class="input-group-text" id="my-search"><i class="fas fa-filter"></i></span>
</div>
</div>
Se verá algo como esto (gracias a KyleMit para la captura de pantalla):
Obtenga más información visitando la documentación del grupo de entrada .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-21 20:46:01