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

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

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

这是它的样子:

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

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

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

结果: