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

这是它的样子:

它可以使用官方引导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时对齐，并关注标签问题。

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

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

编辑图标是通过图标用户类引用的。这个答案是在Bootstrap版本2的时候写的。你可以在下面的页面上看到参考:http://getbootstrap.com/2.3.2/base-css.html#images

您可以使用它的Unicode HTML

所以要添加用户图标，只需添加到占位符属性，或任何您想要的位置。

你可以看看这张小抄。

例子:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <input type="text" class="form-control" placeholder="&#xe008;" 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是输入中常规文本的字体。

没有引导:

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

柱塞演示

注意:这假设您使用的是象形文字，但同样适用于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>

优点:

包括对不同表单类型的支持(基本，水平，内联) 包括对不同控件大小的支持(默认，小，大)

缺点:

不包括左对齐图标的支持

为了克服这些缺点，我将这个拉请求与支持左对齐图标的更改组合在一起。由于这是一个相对较大的变化，它已经被推迟到未来的版本，但如果你现在就需要这些功能，这里有一个简单的实现指南:

只需要在css中包含这些表单更改(也通过底部的隐藏堆栈片段内联)*LESS:或者，如果你是通过LESS构建的，这里是LESS中的表单更改

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

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

这是在Plunker的一个演示

P.S. frizi建议添加指针事件:没有;已添加到引导

没找到你要找的东西吗?试试这些类似的问题:

添加推特引导图标输入框 把搜索图标附近的文本框引导

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

以下是它在纯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。