Bootstrap 3 - Iconos en grupos de inputs

Hola,

Tengo el siguiente grupo de inputs:

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Sección <span class="caret"></span>
    </button>                
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Opción1</a></li>
      <li><a href="#">Opción2</a></li>
      <li><a href="#">Opción3</a></li>
      <li><a href="#">Opción4</a></li>
    </ul>
  </div>                      
  <input id="input-search" type="search" class="form-control" placeholder="Nombre y apellidos">
</div>

Quiero agregar dos iconos, que va seguidos, dentro del #input-search a la derecha del todo, ¿sabrían decirme como hacerlo?

Muchas gracias,

Respuestas

#1

Lo más sencillo sería cambiar esta línea:

<input id="input-search" type="search" class="form-control" placeholder="Nombre y apellidos">

Por esta otra (suponiendo que uses los iconos de FontAwesome):

<div class="input-group">
  <input id="input-search" type="search" class="form-control" placeholder="Nombre y apellidos">
  <span class="input-group-addon">
    <i class="fa fa-..." />
    <i class="fa fa-..." />
  </span>
</div>

Pero también hay otras formas de crear grupos de campos de formularios con Bootstrap.

@javiereguiluz

16 octubre 2015, 11:16

#2

Muchas gracias, con esta información, ya puedo tirar.

@eladerezador

16 octubre 2015, 13:49