Bootstrap 3 glyphicons en complementos

A continuación está mi html (en Jade) de glyphicons en complementos.

.input-group
    input.form-control(type='text')
    span.input-group-addon.glyphicon.glyphicon-calendar

Sin embargo, el complemento no está alineado con el campo de entrada. Screeshot:

introduzca la descripción de la imagen aquí

¿Es normal o un error en bootstrap 3?

Actualización

Lo tengo: en bootstrap.css: 2171 (compilado con less) 

.glyphicon{ ...; top: 1px; ...}

Bug?

Author: Diolor, 2013-10-04
Source

9 answers

Sí, parece que es un error para mi: Es un error: https://github.com/twbs/bootstrap/issues/10936

He leído esto https://github.com/twbs/bootstrap/issues/9850 primero.

Utilizo este código para esto:

<div class="container"> 
<br>
<div class="input-group">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
  <input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group input-group-sm">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
  <input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Username">   
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group input-group-sm">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon glyphicon glyphicon-star"></span>    
</div>
<br>
<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Username">
  <span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>    
</div>
<br>
</div>

Resultados para Firefox:

introduzca la descripción de la imagen aquí:

Habrá un problema para input-group-lg el doble span hace que la entrada sea más larga (debido a .glyphicon: vacío) pero no solucionó el problema. Tampoco encontré .glyphicon{ ...; top: 1px; ...} causado este problema.

Para firefox he encontrado esta solución:

Desde bootstrap.css: 

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  height: 45px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

Cambiar el relleno vertical de 10px a 9px solucionó el problema.

Estas reglas css provienen de formularios.menos (.input-lg() llamada desde inputgroups.menos) usando @ padding-large-vertical: 10px; (de variables.menos)

En Google Chrome encontré el mismo tipo de problema, para todos los tamaños ver:

introduzca la descripción de la imagen aquí

En este caso ayuda usar el doble span: 

`<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>`
 28
Author: Bass Jobsen,
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-10-03 23:02:28

Para aclarar la respuesta de Bass, con la versión actual de Bootstrap 3, todo lo que necesita hacer es: 

<div class="input-group input-group-lg">
  <input type="text" class="form-control">
  <span class="input-group-addon"><span class=" glyphicon glyphicon-star"></span></span>
</div>

En otras palabras, solo el marcado básico de Bootstrap como se describe en los documentos.

 42
Author: Richard,
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
2014-01-24 12:55:52

Anulación local: 

<style type="text/css">
    .glyphicon {
        top: 0;
    }
</style>
 2
Author: Bartosz,
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
2014-09-02 13:41:58 
<div class="input-prepend input-append">
    <span class="add-on"> <i class="icon-user"></i></span>
    <input class="span2" id="appendedPrependedInput" type="text">
    <span class="add-on"> <i class="icon-envelope"></i></span>
</div>
 1
Author: mykinde2,
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
2014-02-23 17:35:28

Lo arreglé con

.glyphicon{ line-height: 1em; }

 0
Author: Brankodd,
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
2014-02-09 14:47:25

Dentro del botón coloque el código html' & nbsp '

& nbsp

 0
Author: Leandro Costa,
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
2016-05-31 19:20:11 
<span class="input-group-addon"><i class="glyphicon glyphicon-user glyphicon-color"></i></span>
 0
Author: anond,
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
2016-06-23 05:34:02

Lo arreglé agregando este "position: initial" al estilo span en el que vive el glyphicon. O puedes usar css como este. 

.glyphicon {
  position: initial;
}


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon glyphicon glyphicon-tags" style="position:initial"></span>
    <input type="text" class="form-control" placeholder="Tags" />
  </div>
</div>
 0
Author: AndyBobandy,
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-02 18:28:36

Viejo post pero podría ayudar a alguien: Yo uso un botón y funciona perfectamente!

    <div class="input-group">
        <input type="text" class="form-control" placeholder="Filter"/>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-filter"></span></button>
        </span>                        
    </div>
 0
Author: Maxime Surmont,
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-06-28 14:34:01