按钮插件中的Bootstrap Glyphicon

Question

Glyphicons in Bootstrap button addons cause the button to shrink so it doesn't fit the input properly. Standard text doesn't have this problem.

Is there a way to do this? Here's an example:

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">
      <span class="glyphicon glyphicon-calendar"></span>
    </button>
  </span>
</div>

But changing the button to something like the following works fine.

<button class="btn btn-default" type="button">XXX</button>

This answer suggests the font size is inherited from the parent element but I don't think that applies here as it works fine with text, and changing the font-size rule doesn't help.

Answer 1

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