Bootstrap 3.1.1 Glyphicon Inside Input Box

by Richard Cotrina

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<br /><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" name="name" placeholder="Username" />
        </span>
	</div>
</div>
</form>





<!-- 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.1.1 Input Groups</a><br/>
                Fork This Skeleton Here <a href='http://jsfiddle.net/rcotrina94/cyCFS/272/'>Bootstrap 3.1.1 Skeleton</a><br/>
<div>

CSS

.usericon input{
    padding-left:25px;
}
.usericon:before{
    opacity:.8;
    height:100%;
    width:25px;
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    position: absolute;
    content:"\e008";
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
}