下面是一种非引导解决方案，通过使用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中的伪元素之前使用:来放置象形文字。

工作演示在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。兼容基于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所说，我们必须添加指针事件: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>

演示:http://jsfiddle.net/yajf3b7q

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

没有引导:

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

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

这个“欺骗”的副作用是，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" />