Bootstrap 3.0 Glyphicon Inside Input Box

by andilab

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">
<div class="input-group merged col-xs-6">

    <span class="input-group-addon">
        <i class="icon-user"></i>
    </span>
        
    <input type="text" class="form-control" placeholder="Username" />
    
</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/>
    External JS File: <a href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'>bootstrap.min.js</a><br/>
    External Style Sheet: <a href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'>bootstrap.min.css</a><br/>
    External Fonts / Icons: <a href='http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css'>font-awesome.min.css</a>
<div>

JavaScript

$(function() {
    $(".merged input").on({
        // can't simply toggle class because 
        // events can be called multiple times
        focus: function() {
            $(this).prev().addClass("focusedInput")
        },
        blur: function() {
            $(this).prev().removeClass("focusedInput")
        }
    });
});