css - 将 Bootstrap Glyphicon 添加到输入框

Question

如何将字形图标添加到文本类型输入框？例如，我想在用户名输入中包含“icon-user”，如下所示:

Answer 1

没有 Bootstrap :

我们稍后会介绍 Bootstrap，但这里有基本的 CSS 概念，以便您自己执行此操作。作为beard of prey points out ，您可以通过将图标绝对定位在输入元素内来使用 CSS 来完成此操作。然后在任一侧添加填充，这样文本就不会与图标重叠。

因此对于以下 HTML:

<div class="<b>inner-addon left-addon</b>">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

您可以使用以下 CSS 来左右对齐字形:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Demo in Plunker

Note: This presumes you're using glyphicons, but works equally well with font-awesome.
For FA, just replace .glyphicon with .fa

---

使用 Bootstrap :

作为buffer points out , 这可以通过使用 Validation States with Optional Icons 在 Bootstrap 中本地完成.这是通过给 .form-group 元素 .has-feedback 类和给图标 .form-control-feedback 类来完成的>.

最简单的例子是这样的:

<div class="form-group <b>has-feedback</b>">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user <b>form-control-feedback</b>"></i>
</div>

优点:

• 包括对不同表单类型(基本、水平、内联)的支持
• 包括对不同控件大小(默认、小、大)的支持

缺点:

• 不包括对左对齐图标的支持

为了克服缺点，我整理了这个 pull-request更改以支持左对齐图标。由于这是一个相对较大的更改，因此已推迟到 future 的版本发布，但如果您今天需要这些功能，这里有一个简单的实现指南:

只需包含 these form changes in css (也通过底部的隐藏堆栈片段内联)
_{*LESS:或者，如果您是 building via less , 这是 form changes in less}

然后，您所要做的就是在任何具有类 .has-feedback 的组中包含类 .has-feedback-left 以便左对齐图标。

由于在不同的表单类型、不同的控件大小、不同的图标集和不同的标签可见性上有很多可能的 html 配置，我创建了一个测试页面来显示每个排列的正确 HTML 集以及一个现场演示.

Here's a demo in Plunker

P.S. frizi's suggestion of adding pointer-events: none; has been added to bootstrap

没有找到您要找的东西？尝试这些类似的问题:

• Add Twitter Bootstrap icon to Input box
• Put search icon near textbox bootstrap

为左对齐反馈图标添加 CSS

.has-feedback .form-control {
  padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
  padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
  padding-right: 46px;
}
.has-feedback-left .form-control {
  padding-right: 12px;
  padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
  padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
  padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
  left: 0;
}
.form-control-feedback {
  line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
  top: 0;
}
@media (min-width: 768px) {
  .form-inline .inline-feedback {
    position: relative;
    display: inline-block;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .has-feedback-left .form-control-feedback {
  left: 15px;
}