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

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

结果

unicode的完整列表可以在The complete Font Awesome 4.6.3图标参考中找到

这里有另一种方法，通过在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规则都用于居中和添加适当的间距。

结果:

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

这是它的样子:

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

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