Incorrect glyphicon sizes in form / .input-group / .input-group-addon inputs in bootstrap 3

问题

I am trying to add glyphicons to form input boxes using bootstrap 3.

However, the glyphicons are displayed larger than the input textbox, as can be seen here:

The documentation says Use .input-group with an .input-group-addon to prepend or append elements to a .form-control.

As far as I can tell, I'm doing just this, but I clearly have something wrong, and can't figure out what it is.

Markup and fiddle below:

<div class="jumbotron">
    <h4>Glyphicons, why you no look nice?</h4>
    <form name="form">
        <div class="input-group">
            <span class="input-group-addon glyphicon glyphicon-envelope"></span>
            <input type="email" 
                class="form-control" 
                placeholder="Email" 
                name="email"/>
        </div>                
        <div class="input-group">
            <span class="input-group-addon glyphicon glyphicon-lock"></span>
            <input type="password" 
                class="form-control" 
                placeholder="Password" 
                name="password"/>
        </div>                
    </form>
</div>

Working example on jsfiddle

回答1:

It's because the font-size is being inherited from the 'jumbotron' (21px).

You'll need to explicitly set the font-size on the form or its items.

Also, once you use the glyphicon class, you'll get the top: 1px so you'll need to set that to 0 for the addon to line up with the input.

Here's my updated fiddle.

来源：https://stackoverflow.com/questions/20391366/incorrect-glyphicon-sizes-in-form-input-group-input-group-addon-inputs-in