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

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;
}

输入将占据网格中 space 的 100%，图标将浮动在顶部。

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

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

Put a font-awesome icon inside an input tag

html

font-awesome

Bootstrap 3

Bootstrap 4

只有 CSS