【问题标题】：Put a font-awesome icon inside an input tag在输入标签内放置一个很棒的字体图标
【发布时间】：2017-02-18 22:07:24
【问题描述】：

我正在尝试在输入标签中放置一个很棒的字体图标。

这是我的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>

但是如图所示，那个图标比输入框大：

如何修复图标？

【问题讨论】：

您是否尝试设置或 字体大小？
不，我没有尝试。我应该设置什么？
向添加一个类，然后尝试使用 .test class font-size。像这样：.test {font-size: 14px}
将 fa-lg , fa-2x , fa-3x , ... 类添加到 元素也是这样做的

标签： html font-awesome

【解决方案1】：

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

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

【讨论】：

如果这些例子有效，我就不会发布问题
不幸的是，这个解决方案似乎不再适用于 bootstrap4.0
@piotao 我刚刚添加了一个带有 Bootstrap 4 类的示例；）
如果表单有标签，这个例子就会中断

【解决方案2】：

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

对我来说有帮助

【讨论】：

谢谢。我花了很多时间来解决这个问题。不错的提示。它有效。
它可能有效，但您正在覆盖 Boostrap CSS，它可能会导致您在其他输入上出现一些样式问题...
是的，你是对的。我们不能按照我发布的方式直接使用它，因为我们可能会破坏布局。我们必须为我们覆盖的元素提供精确的选择器。我刚刚发布了我们如何做到这一点的示例，没有选择器，因为我没有任何标记。

【解决方案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% 的空间，并且图标将浮动在顶部。

适用于响应式设计，您可以点击图标。

【讨论】：