The following code shows how to align icon inside text input.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-2.0.2.js'></script>
<link rel="stylesheet" type="text/css"
href="http://getbootstrap.com/dist/css/bootstrap.css">
<script type='text/javascript'
src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css"
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<style type='text/css'>
.fa.form-control-feedback {<!-- w ww.jav a2 s .co m-->
line-height: 34px;
}
.input-lg ~ .fa.form-control-feedback {
line-height: 46px;
}
.has-feedback-left input.form-control {
padding-left: 34px;
padding-right: 12px;
}
.has-feedback-left .form-control-feedback {
left: 0;
}
.form-horizontal .has-feedback-left .form-control-feedback {
left: 12px;
}
</style>
</head>
<body style='margin:30px'>
<h2>Basic Form w/ Labels</h2>
<form role="form">
<div class="form-group has-feedback has-feedback-left">
<label class="control-label">Username</label> <input type="text"
class="form-control" placeholder="Username" /> <i
class="fa fa-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Search</label> <input type="search"
class="form-control" placeholder="Search" /> <i
class="fa fa-search form-control-feedback"></i>
</div>
</form>
</body>
</html>