Bootstrap 3.0 Icon Inside Input Box

by bizamajig

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<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>

CSS

.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;
}