将Bootstrap Glyphicon添加到输入框

Question

如何将glyphicon添加到文本类型输入框？例如,我想在用户名输入中使用'icon-user',如下所示:

Answer 1

没有Bootstrap:

我们将在一秒钟内进入Bootstrap,但这里是基本的CSS概念,以便自己完成.正如猎物的胡须指出的那样,你可以通过将输入元素内部的图标绝对定位来使用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; }

在Plunker演示

注意:这假设你使用的是glyphicons,但同样适用于font-awesome.
对于FA,只需更换.glyphicon与.fa

使用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>

优点:

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

缺点:

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

为了克服缺点,我将这个pull-request与更改一起放在一起,以支持左对齐的图标.由于这是一个相对较大的变化,它一直推迟到未来发布,但如果你今天需要这些功能,这里有一个简单的实现指南:

只需在css中包含这些表单更改(也可以通过底部隐藏的堆栈代码内联)
_{*LESS:或者,如果您通过less构建,这里的表单更改为less}

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

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

这是Plunker的一个演示

PS frizi的添加建议pointer-events: none;已添加到bootstrap中

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

• 将Twitter 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;
}

Answer 2

该官员方法.无需自定义CSS:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

演示:http://jsfiddle.net/LS2Ek/1/

此演示基于Bootstrap文档中的示例.在此处向下滚动到"With Optional Icons" http://getbootstrap.com/css/#forms-control-validation

Answer 3

这是一个仅限CSS的替代方案.我为搜索字段设置了这个以获得类似于Firefox(和其他一百个应用程序)的效果.)

这是一个小提琴.

HTML

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

CSS

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}

Answer 4

以下是我只使用默认引导程序CSS v3.3.1的方法:

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

这就是它的样子:

Answer 5

这个'作弊'将与glyphicon类将改变输入控件的字体的副作用一起使用.

小提琴

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

如果你想摆脱副作用你可以删除"glyphicon"类并添加以下CSS(可能有一种更好的方式来设置占位符伪元素的样式,我只在Chrome上测试过).

小提琴

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

可能是一个更清洁的解决方案:

小提琴

CSS

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

HTML

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />

Answer 6

它可以使用官方bootstrap 3.x版本中的类来完成,没有任何自定义CSS.

使用input-group-addon输入标签之前,内部input-group则使用任何glyphicons的,这里是代码

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

这是输出

要自定义它,请在您自己的custom.css文件中添加几行custuom css(如果需要,可以调整填充)

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

通过使input-group-addon透明的背景并使输入标签的左渐变为零,输入将具有无缝外观.这是自定义输出

这是一个jsbin 示例

这将解决使用输入-lg时重叠标签和对齐的自定义css问题,并关注选项卡问题.

Answer 7

这是一个非引导程序解决方案,通过使用base64 URI编码将glyphicon的图像表示直接嵌入CSS中,可以简化标记.

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}

<input class="search">

Answer 8

如果您正在使用Fontawesome,您可以这样做:

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

结果

完整的unicode列表可以在The Complete Font Awesome 4.6.3图标参考中找到

Answer 9

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}

<input class="search">