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

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 examples：

<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引入了一些new classes for input groups，我们需要使用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/

Answer 2

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

就我而言，它有帮助

Answer 3

仅使用CSS

<div class="wrapper">
   <input type="text" class="input">
   <i class="icon" class="fas fa-some-icon"></i>
</div>

使用以下列模板将输入和图标包装在2列网格中：1fr 0

.wrapper {
    display: grid;
    grid-template-columns: 1fr 0;
}

为图标提供一个从右侧开始的相对位置：

.icon{
    width: 40px;
    position: relative;
    right: 45px;
    font-size: 35px;
    line-height: 40px;
    cursor: pointer
    z-index: 1;
}

为输入留出一定的空白：

.input{
    padding-right: 57px;
}

输入将占用网格中100％的空间，图标将浮在顶部。

与自适应设计很好地配合，您可以单击图标。