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

enter image description here

14 回答

这是通过在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规则用于居中和添加适当的间距 .

结果：

screenshot

回复于 2024-05-08T23:31:04+08:00

您可以使用其Unicode HTML

因此，要添加用户图标，只需将  添加到 placeholder 属性或任何您想要的位置 .

您可能想要检查this cheat sheet .

例：

<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是输入中常规文本的字体 .

回复于 2024-05-08T23:31:04+08:00

711

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

Here's a fiddle .

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;
}

回复于 2024-05-08T23:31:04+08:00

40
如果您使用 Fontawesome ，您可以这样做：
```
<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />
```
Result

完整的unicode列表可以在The complete Font Awesome 4.6.3 icon reference中找到
回复于 2024-05-08T23:31:04+08:00

我对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>

在输入上我有这样的事情：
enter image description here

回复于 2024-05-08T23:31:04+08:00

official 方法 . 无需自定义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

enter image description here

回复于 2024-05-08T23:31:04+08:00

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

回复于 2024-05-08T23:31:04+08:00

1
您应该可以使用现有的引导类和一些自定义样式来完成此操作 .
```
<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>
```
Edit 图标通过 icon-user 类引用 . 这个答案是在Bootstrap版本2时编写的 . 您可以在下一页上看到该参考：http://getbootstrap.com/2.3.2/base-css.html#images
回复于 2024-05-08T23:31:04+08:00

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

回复于 2024-05-08T23:31:04+08:00

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

这就是它的样子：

enter image description here

回复于 2024-05-08T23:31:04+08:00

如果您有幸只需要现代浏览器：尝试css transform translate . 这不需要包装器，并且可以进行自定义，以便您可以为输入[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

回复于 2024-05-08T23:31:04+08:00

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

Fiddle

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

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

Fiddle

.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";
}

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

Fiddle

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

回复于 2024-05-08T23:31:04+08:00

60
它可以使用官方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 example

这将解决自定义css问题与标签重叠，使用input-lg对齐并关注选项卡问题 .
回复于 2024-05-08T23:31:04+08:00

没有引导程序：

为了自己做这件事，我们'll get to Bootstrap in a second, but here'是基本的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; }

在Plunker演示

css screenshot

注意：这假设您使用的是glyphicons，但同样适用于font-awesome . 对于FA，只需将.glyphicon替换为.fa即可

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

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

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

只需包含these form changes in css（也通过底部的隐藏堆栈代码内联）

LESS：或者，如果你通过less建造，这里的形式变化较少

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

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

这是Plunker的演示

feedback screenshot

P.S. frizi建议添加指针事件：无;已添加到bootstrap中

Didn't find what you were looking for ？试试这些类似的问题：

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

回复于 2024-05-08T23:31:04+08:00

将Bootstrap Glyphicon添加到输入框

14 回答

在jsFiddle中运行演示

您可以使用其Unicode HTML

没有引导程序：

在Plunker演示

使用Bootstrap：

这是Plunker的演示

左对齐反馈图标的附加CSS

相关问题