<p>Full Size:</p>
<div class="left-inner-addon ">
<i class="icon-user"></i>
<input type="text"
class="form-control"
placeholder="Username" />
</div>
<div class="right-inner-addon ">
<i class="icon-search"></i>
<input type="search"
class="form-control"
placeholder="Search" />
</div>
<br/>
<p>Smaller:</p>
<div class="col-xs-6" >
<div class="left-inner-addon">
<i class="icon-user"></i>
<input type="text"
class="form-control"
placeholder="Username" />
</div>
</div>
<div class="col-xs-6" >
<div class="right-inner-addon">
<i class="icon-search"></i>
<input type="search"
class="form-control"
placeholder="Search" />
</div>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>
About this SO Question: <a href=' http://stackoverflow.com/q/18838964/1366033'>Add Bootstrap Glyphicon to Input Box</a><br/>
Find documentation: <a href='http://getbootstrap.com/components/#input-groups'>Bootstrap 3.0 Input Groups</a><br/>
Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>
.left-inner-addon {
position: relative;
}
.left-inner-addon input {
padding-left: 30px;
}
.left-inner-addon i {
position: absolute;
padding: 10px 12px;
pointer-events: none;
}
.right-inner-addon {
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 10px 12px;
pointer-events: none;
}
External resources loaded into this fiddle: