在输入标签中放置一个超棒的字体图标

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>

但是该图标比输入框大，正如您在这张图片中看到的那样：

我该如何修复图标？

原文由 harry-potter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

引导程序 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

引导程序 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/

原文由 Finrod 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

input.form-control{
    margin-top: 0;
}

就我而言，它有帮助

原文由 Alan Mroczek 发布，翻译遵循 CC BY-SA 3.0 许可协议