bootstrap在input框中加入icon圖標

<form class="form-horizontal">
	<div class="form-group has-feedback">
		<div class="username">
			<span class="fa fa-user-circle-o fa-2x form-control-feedback"></span>
			<input type="text" class="form-control" id="inputPassword" placeholder="用戶名">
		</div>
	</div>
	<div class="form-group pwd-top has-feedback">
		<div class="password">
			<span class="fa fa-unlock-alt fa-2x form-control-feedback"></span>
				<input type="password" class="form-control" id="inputPassword" placeholder="密碼">
	        </div>
	</div>
	<div class="form-group">
						
		<div class="checkbox  col-sm-4 col-md-4 col-lg-4">
			<label>
      				<input type="checkbox"> 記住密碼
    			</label>	
	        </div>
		<label for="" class="col-sm-4 col-md-4 col-lg-4 control-label forget-pass"><a href="">忘記密碼</a></label>	
		<label for="" class="col-sm-4 col-md-4 col-lg-4 control-label register"><a href="">注冊</a></label>
	</div>
	<div class="form-group">
		<button class="btn btn-login" type="submit">登&nbsp;錄</button>
	</div>
</form>

實際效果

對css樣式進行修改，才能使icon圖標垂直居中，然后居左
下面的line-height: 50px，因為我的input框是50px高

然后這利的left:20px 如果你不給，icon圖標就是靠右對齊

/*padding-left:60px   因為圖標是有一個寬度，然后圖標有一個left:20px   圖標的寬度34px， 估計一下  設置差不多60px， 剛好讓文字不被圖標遮擋*/
.form-center .username input,.form-center .password input{
	height: 50px;
	padding-left: 60px;
}


.form-control-feedback {
	line-height: 50px;
	left: 20px;
}