将 Bootstrap 图标添加到输入框

Question

我该如何将glyphicon添加到文本输入框中？例如，我想在用户名输入框中使用'icon-user'，类似于以下内容：

- doovers

---

这是我的备选方案（2014年） JSFiddle [http://jsfiddle.net/rcotrina94/cyCFS/272] - Richard Cotrina

晚到派对了，但是看看我的答案，我只使用Bootstrap来实现这个效果，并且使用两行CSS来改变颜色和边框。它解决了在答案部分讨论的其他问题。https://dev59.com/a2Mk5IYBdhLWcg3w7COX#40945821 - some_groceries

Answer 1

没有Bootstrap：

我们稍后会讲到Bootstrap，但是这里有一些基本的CSS概念可以让你自己实现。正如beard of prey指出，你可以通过绝对定位图标在输入元素内部来实现此目的。然后在两侧添加填充，以使文本不与图标重叠。

因此，下面是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; }

在 Plunker 中的演示

请注意：这假定您正在使用glyphicons，但同样适用于font-awesome。
对于FA，请将.glyphicon替换为.fa。

---

使用Bootstrap：

正如buffer所指出的, 这可以通过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，实现了支持将图标左对齐的更改。由于这是一个相对较大的更改，它被推迟到将来的版本发布，但如果你需要这些功能今天，这里有一个简单的实现指南：

只需在css中包含这些表单更改（也可通过底部的隐藏堆栈片段进行内联）
_{*LESS：或者，如果您是通过less构建，这里是less中的表单更改}
然后，在任何具有类.has-feedback的组中包含类.has-feedback-left，以便左对齐图标。

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

这是一个在 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;
}

- KyleMit

---

看我的编辑，我已经使 focusedInput 的 CSS 选择器更加明确，否则它会被 .input-group-addon 覆盖。 - Michel Müller

@MichelMüller，我不确定你建议的编辑有什么价值。.focusedInput类在.input-group-addon之后定义，因此当样式表级联时，后者的样式应该优先。您能更好地描述导致这成为问题的情况吗？ - KyleMit

我建议为图标添加“pointer-events: none;”，因为默认情况下它们会干扰输入焦点。 - Frizi

@Leandro，当然需要！。这是因为FontAwesome在版本4中引入了破坏性变化。如果你想从3.x升级到4.x，你必须将<i class="icon-user"></i>更改为<i class="fa fa-user"></i>。每当你考虑更新外部库时，请务必阅读发布说明和新文档，以确定你的应用程序是否仍然兼容或需要升级。 - KyleMit

@Leando，你可以阅读更多关于FA 4.0中的新命名约定的信息，以及从3.21升级到4的完整迁移指南。 - KyleMit

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/yajf3b7q

本演示基于 Bootstrap 文档中的一个示例。请在此处向下滚动至“带可选图标”http://getbootstrap.com/css/#forms-control-validation

- user

---

+1 - 在Bootstrap中内置一种本地化的方法确实很不错。虽然这并不擅长像问题所需的左对齐图标，但绝对是一个好方法。 - KyleMit

将{left:0}添加到glyphicon类中即可处理左对齐。http://jsfiddle.net/LS2Ek/30/。不过我喜欢你的轮廓+阴影方法。看起来很整洁！ - user

这原本也是我想的，但在不同情况下，你将不得不重新创建大量的CSS工作。如果你添加一个标签，你会看到一些问题。在行内表单中，left:0不再标识输入的开始。此外，你需要在输入框左侧添加填充，并在右侧删除它。尽管如此，这仍然是一个非常好的、干净的解决方案。我认为确定输入框的左侧是困难的部分，这就是使用带有position:relative的包装器的地方。 - KyleMit

你应该将这个补丁添加到引导程序中。它是一个方便且经常使用的功能。 - user

Answer 3

这里有一个仅使用CSS的替代方案。我为搜索字段设置了这个效果，类似于Firefox（和其他数百个应用程序）。

这是一个演示。

HTML

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

CSS

->

CSS

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

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

- beardofprey

---

+1 个好的解决方案。我将其改编为左右实用类，但绝对是正确的方法。 - KyleMit

是的，非常简单而且完美。 - PeMa

Answer 4

可以使用官方Bootstrap 3.x版本中的类，而无需使用任何自定义CSS来完成。

在输入标签之前使用 input-group-addon 类，在 input-group 中使用任何一个图标字体，以下是代码：

<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文件中添加一些自定义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 的示例。

这将解决使用input-lg时的标签重叠、对齐和选项卡问题等自定义CSS问题。

- some_groceries

Answer 5

以下是我如何只使用默认的Bootstrap 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>

这是它的外观:

- Garry English

Answer 6

如果你正在使用 Fontawesome，你可以这样做：

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

结果

完整的Unicode列表可以在Font Awesome 4.6.3图标参考手册中找到。

- Merlin

Answer 7

这个“作弊方法”会使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" />

- greenbender

Answer 8

这里有一个非Bootstrap解决方案，它通过使用base64 URI编码在CSS中直接嵌入glyphicon的图像表示，从而使您的标记保持简单。

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">

- mccainz

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">

- Angel Patel

---

很棒的“jugad”，但设置自定义图标也非常有用。谢谢。 - Dhruv Raval

Answer 10

另一种方法是通过在CSS中使用伪元素:before来放置glyphicon。

在jsFiddle上的演示

对于这个HTML：

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

请使用此CSS（与Bootstrap 3.x和基于Webkit的浏览器兼容）。

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

如@Frizi所说，我们需要添加pointer-events: none;，以便光标不会干扰输入焦点。所有其他CSS规则都是用于居中和添加适当的间距。

结果：

- Richard Cotrina