357

How can I add a glyphicon to a text type input box? For example I want to have 'icon-user' in a username input, something like this:

enter image description here

4

15 回答 15

786

没有引导程序：

我们稍后会介绍 Bootstrap，但这里有一些基本的 CSS 概念，以便您自己完成。正如beard of prey 指出的那样，您可以通过将图标绝对定位在输入元素内来使用 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 中的演示

css 截图

注意：这假定您正在使用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>

优点：

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

缺点：

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

为了克服这些缺点，我将这个拉取请求与支持左对齐图标的更改放在一起。由于是比较大的改动，所以一直推迟到以后的版本发布，但是如果你今天需要这些功能，这里有一个简单的实现指南：

只需将这些表单更改包含在 css 中（也通过底部的隐藏堆栈片段内联）
*LESS：或者，如果您通过 less 构建，这里的表单更改为 less

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

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

这是 Plunker 中的演示

反馈截图

PS frizi 的添加建议pointer-events: none;已添加到 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;
}

于 2013-09-17T00:03:58.543 回答
65

官方方法。无需自定义 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

在此处输入图像描述

于 2014-04-22T20:44:38.880 回答
45

这是一个纯 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;
}
于 2013-11-11T23:52:53.703 回答
12

可以使用官方 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 问题。

于 2016-12-03T08:32:34.977 回答
11

以下是我仅使用默认引导 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>

这就是它的外观：

在此处输入图像描述

于 2015-02-02T04:39:29.137 回答
9

如果您使用的是Fontawesome，您可以这样做：

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

结果

在此处输入图像描述

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

于 2016-10-13T08:25:20.197 回答
8

这种“作弊”会产生副作用，即 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" />
于 2014-01-28T09:40:09.137 回答
6

这是一个非引导解决方案，通过使用 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">

于 2015-04-17T17:31:12.060 回答
6 

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

于 2017-05-02T10:02:30.123 回答
4

这是另一种方法，通过:before在 CSS 中使用伪元素放置字形图标。

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 规则都用于居中和添加适当的间距。

结果：

截屏

于 2014-03-21T03:29:18.857 回答
2

你可以使用它的 Unicode HTML

因此，要添加用户图标，只需添加&#xe008;到placeholder属性或您想要的任何位置。

您可能需要查看此备忘单。

例子：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

不要忘记将输入的字体设置为 Glyphicon 字体，使用以下代码：font-family: 'Glyphicons Halflings', Arial，其中 Arial是输入中常规文本的字体。

于 2017-09-21T21:49:38.733 回答
2

用 Bootstrap 4 测试。

取一个form-control, 并添加is-valid到它的类中。注意控件如何变为绿色，但更重要的是，注意控件右侧的复选标记图标？这就是我们想要的！

例子：

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
	<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>

于 2019-05-08T18:53:59.437 回答
1

对于这种情况，我对 Bootstrap 3.3.5 也有一个决定：

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

在输入我有这样的事情： 在此处输入图像描述

于 2015-11-24T19:49:37.067 回答
0

您应该能够使用现有的引导类和一些自定义样式来做到这一点。

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>

编辑 该图标是通过icon-user类引用的。此答案是在 Bootstrap 版本 2 时编写的。您可以在以下页面上查看参考：http: //getbootstrap.com/2.3.2/base-css.html#images

于 2013-09-16T23:35:59.270 回答
0

如果你有幸只需要现代浏览器：试试 css transform translate。这不需要包装器，并且可以自定义，以便您可以为 input[type=number] 留出更多间距以容纳输入微调器，或将其移动到句柄的左侧。

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

于 2015-06-10T01:59:49.880 回答