小开

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

<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

小开

最佳答案

没有引导:

我们将在一秒钟内得到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; }

< a href = " http://plnkr.co/edit/5D8fv5o5egpKpYz509O3?p=preview" rel="noreferrer"> Plunker中的Demo . p=preview" rel="noreferrer">

< a href = " http://embed.plnkr。co/5D8fv5o5egpKpYz509O3/preview" rel="noreferrer"> css截图

请注意:这假设你正在使用glyphicons，但同样适用于font-awesome 对于FA，只需将.glyphicon替换为.fa

引导:

作为Buffer指出，这可以通过使用带有可选图标的验证状态在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请求放在一起，并做了一些改变，以支持左对齐的图标。由于这是一个相对较大的变化，它已经被推迟到未来的版本，但如果你需要这些特性今天，这里是一个简单的实现指南:

只需要包含这些css形式的变化(也通过底部的隐藏堆栈片段内联)
_{*LESS:或者，如果你是建筑通过LESS，这里是形式变化在Less}

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

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

< a href = " http://plnkr.co/edit/ZrnnkFR3Yv9HGQHrRMiW?p=preview" rel="noreferrer">这是一个演示在Plunker

< a href = " http://embed.plnkr。co/ZrnnkFR3Yv9HGQHrRMiW/preview" rel="noreferrer"> feedback截图 .co /ZrnnkFR3Yv9HGQHrRMiW/preview" rel="noreferrer">

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

小开

这里有一个css的替代方案。我设置了一个搜索字段，以获得类似于Firefox (&其他100个应用程序。)

这是小提琴。

超文本标记语言

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

小开

这个“欺骗”的副作用是，glyphicon类会改变输入控件的字体。

< a href = " http://jsfiddle.net/WK3Q6/50/ " >小提琴< / >

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

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

< a href = " http://jsfiddle.net/WK3Q6/57/ " >小提琴< / >

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

可能有一个更干净的解决方案:

< a href = " http://jsfiddle.net/WK3Q6/59/ " >小提琴< / >

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

超文本标记语言

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

小开

这里有另一种方法，通过在CSS中使用:before伪元素放置象形文字。

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 (引导3。兼容基于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规则都用于居中和添加适当的间距。

结果:

小开

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

演示:__abc0

这个演示是基于Bootstrap文档中的一个例子。向下滚动到“带可选图标”;这里http://getbootstrap.com/css/#forms-control-validation

enter image description here

小开

下面是我如何使用默认的引导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

小开

下面是一种非引导解决方案，通过使用base64 URI编码将象形文字的图像表示直接嵌入到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">

小开

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

< a href = " http://codepen.io/anon/pen/RPRmNq?编辑= 110 " rel = " nofollow”> http://codepen.io/anon/pen/RPRmNq?编辑= 110 < / >

小开

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

对于输入，我有这样的东西:

< / p >

小开

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

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

结果

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

小开

它可以使用官方引导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 例子

这将解决自定义css与标签重叠的问题，在使用input-lg时对齐，并专注于制表符问题。

小开

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

小开

您可以使用它的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，其中 >是输入中常规文本的字体。

小开

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

小开

以下是它在纯Bootstrap 5中的工作原理:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>iconbutton</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"> </head> <body> <div class="d-flex flex-row align-items-center m-4 border rounded"> <i class="fa-solid fa-search mx-2"></i> <input type="text" class="form-control border-0" placeholder="Search"> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

要删除出现在焦点上的边框，将shadow-0添加到输入中。

将引导符号添加到输入框