Css 将 Bootstrap Glyphicon 添加到输入框

发布于09月17日

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

在此处输入图像描述

Without Bootstrap:

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

因此，对于以下HTML:

<div class="inner-addon left-addon">
    <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; }

柱塞中的演示

个

Note:假设您使用的是glyphicons，但font-awesome同样适用.
对于FA，只需将.glyphicon替换为.fa

With Bootstrap:

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

最简单的示例如下所示:

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

Pros:

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

Cons:

不包括对left个对齐图标的支持

为了克服缺点，我将这pull-request个图标与支持左对齐图标的更改放在一起.由于这是一个相对较大的更改，它被推迟到future 的版本，但如果您需要这些功能，下面是一个简单的实现指南:

Just include the these form changes in css (also inlined via hidden stack snippet at the bottom)
_{*LESS: alternatively, if you are building via less, here's the form changes in less}

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

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

这是Plunker的一个演示

个

加法pointer-events: none;的P.S. added to bootstrap8049_18839305">frizi's suggestion是added to bootstrap

Didn't find what you were looking for？try 以下类似的问题:

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