在输入标记内放置一个字体很棒的图标

Question

我正在尝试在输入标记中放置一个Font-awesome图标.

这是我的HTML代码:

<div class="input-group">
        <input class="form-control" type="password" placeholder="Password">
        <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
</div>

但是这个图标比输入框大,如下图所示:

我该如何修复图标？

Answer 1

Bootstrap 3

查看Font Awesome文档中的Bootstrap示例:

<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="Password">
</div>

它应该开箱即用,所以如果你仍然有高度差异,检查没有其他CSS东西覆盖你的input-group-addon身高

工作JSFiddle:https://jsfiddle.net/vs0wpy80

Bootstrap 4

Bootstrap 4 为输入组引入了一些新类,我们需要使用input-group-prepend和input-group-append:

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-envelope-o fa-fw"></i></span>
  </div>
  <input class="form-control" type="text" placeholder="Email address">
</div>

<div class="input-group mb-3">
  <input class="form-control" type="text" placeholder="Email address">
  <div class="input-group-append">
    <span class="input-group-text"><i class="fa fa-envelope-o fa-fw"></i></span>
  </div>
</div>

工作JSFiddle:https://jsfiddle.net/8do9v4dp/5/