340

如何将字形图标添加到文本类型输入框？例如，我想在用户名输入中包含“ icon-user”，如下所示：

在此处输入图片说明

css twitter-bootstrap glyphicons

— 多佛
source

5

这是我的替代解决方案（2014年）JSFiddle [ jsfiddle.net/rcotrina94/cyCFS/272 ]

— Richard Cotrina 2014年

晚到晚会，但检查出我的答案，即时通讯仅使用引导程序来获得该效果，并更改颜色和边框，我正在使用两行CSS。它解决了答案部分中讨论的其他问题stackoverflow.com/a/40945821/2914407

— Dheeraj

755

没有引导程序：

我们将稍后介绍Bootstrap，但这是基本的CSS概念，您可以自己做。正如猎物所指出的那样，您可以通过将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：

正如缓冲区指出的那样，这可以通过在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;已添加到引导程序中

找不到您想要的东西吗？尝试以下类似问题：

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

展开摘要

— 凯尔·米特
source

参见我的编辑，我使focusedInput的css选择器更加明确，否则它将被.input-group-addon覆盖。

— 米歇尔·穆勒

@MichelMüller，我不确定在您建议的修改中是否看到了该值。在.focusedInput类定义后，.input-group-addon所以当样式表级联下来，后者的风格应该优先考虑。您能否更好地描述导致此问题的情况？

— KyleMit 2013年

2

我建议添加“指针事件：无；” 图标，因为默认情况下它们会干扰输入聚焦。

— Frizi 2013年

1

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

— KyleMit 2014年

1

@Leando，您可以详细了解FA 4.0中的新命名约定以及从3.21到4

— KyleMit 2014年

62

该官员方法。无需自定义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文档中的示例。在http://getbootstrap.com/css/#forms-control-validation处向下滚动到“带有可选图标”

在此处输入图片说明

— 用户
source

3

+1-在引导程序中内置本机方法绝对不错。尽管这并不像问题所要求的那样在左对齐图标上如此热门，但绝对是一种好方法。

— KyleMit 2014年

1

添加{left:0}到glyphicon类应注意左对齐。jsfiddle.net/LS2Ek/30。不过，我喜欢您的“轮廓+阴影”方法。看起来很整洁！

— 用户

最初我也是这么想的，但是您将不得不在不同情况下重新创建许多CSS工作。如果添加标签，将会遇到一些问题。在嵌入式表单上，left:0不再标识输入的开始。另外，您还需要在输入的左侧添加填充，并在右侧将其删除。仍然是一个非常不错且干净的解决方案。我认为识别输入的左侧是最困难的部分，这是包装器position:relative派上用场的地方。

— KyleMit 2014年

您应该将此补丁添加到引导程序。这是一个方便且经常使用的功能。

— 用户

43

这是仅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;
}

— 捕食者
source

+1很棒的解决方案。我将其调整为左右实用程序类，但绝对是正确的方法

— KyleMit 2013年

是的，如此简单且完美

— PeMa

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>

这是它的外观：

在此处输入图片说明

— 加里英语
source

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

— 绿弯曲
source

8

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

— Dheeraj
source

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

展开摘要

— 麦凯恩兹
source

6

如果您使用的是Fontawesome，则可以执行以下操作：

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

结果

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

— 梅林
source

5

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

展开摘要

— 天使帕特尔
source

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

— Dhruv Raval

4

这是通过:before在CSS中使用伪元素放置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规则都用于居中和添加适当的间距。

结果：

屏幕截图

— 理查德·科特里娜
source

2

您可以使用其Unicode HTML

因此，要添加用户图标，只需将其添加到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是输入中常规文本的字体。

— 蒙娜丽莎
source

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>

输入时，我有这样的东西：

— 维塔利·内斯特连科（Vitalii Nesterenko）
source

1

已通过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>

展开摘要

— 伊戈尔（Igor K）
source

0

如果您足够幸运，只需要现代浏览器，请尝试CSS转换翻译。这不需要包装器，并且可以进行自定义，以便您可以为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

— httpete
source

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

— 悠悠
source

在此答案中看不到bootstrap glyphicon参考

— Kirby

@Kirby，通过icon-user类引用了该图标。这个答案是在Bootstrap版本2时写的。您可以在以下页面上找到

— YOOOEE 2015年

将Bootstrap Glyphicon添加到输入框

没有引导程序：

在Plunker中的演示

使用Bootstrap：

这是Plunker中的一个演示

左对齐反馈图标的附加CSS

jsFiddle中的工作演示

您可以使用其Unicode HTML

已通过Bootstrap 4。