将Bootstrap Glyphicon添加到输入框

没有引导程序：
我们将稍后介绍Bootstrap，但这是基本的CSS概念，您可以自己做。正如猎物所指出的那样，您可以通过将CSS绝对放置在输入元素内部的图标来使用CSS。然后在任一侧添加填充，以使文本不会与图标重叠。

因此，对于以下HTML：

<div >    <i ></i>    <input type="text"  /></div>

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

.inner-addon {     position: relative; }.inner-addon .glyphicon {  position: absolute;  padding: 10px;  pointer-events: none;}.left-addon .glyphicon  { left:  0px;}.right-addon .glyphicon { right: 0px;}.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

.fa

使用Bootstrap：

正如缓冲区指出的那样，这可以通过在Bootstrap中通过使用带有可选图标的验证状态来完成。这是通过为.form-group元素提供的类.has-feedback和向图标提供的类来完成的.form-control-feedback。

最简单的示例如下所示：

<div >    <label >Username</label>    <input type="text"  placeholder="Username" />    <i ></i></div>

优点：

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

缺点 :

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

为了克服弊端，我将请求请求与更改合并在一起以支持左对齐的图标。由于这是一个相对较大的更改，因此已推迟到以后的发行版中，但是如果您今天需要这些功能，这里有一个简单的实施指南：

只需在css中包括这些形式更改（也通过底部的隐藏堆栈片段内联）* LESS：或者，如果您通过less进行构建，则这是less中的形式更改

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

由于在不同的表单类型，不同的控件大小，不同的图标集和不同的标签可见性上有许多可能的html配置，因此我创建了一个测试页，该页面显示每个排列的正确HTML设置以及实时演示。

Here’s a demo inPlunker

P.S. frizi’ssuggestionof adding

pointer-events: none;

左对齐反馈图标的附加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;}