Adding a Bootstrap Glyphicon to Input Box

You can do this all with CSS. You can absolutely position the icon inside of the input box, and then add padding to the side of the input element so the text field doesn't begin until after the icon.

For the following HTML:

                    Copy
                    
                 
<div class="left-inner-addon">
    <i class="icon-user"></i>
    <input type="text" class="form-control" />
</div>

To position a left aligned icon, use the following CSS:

                    Copy
                    
                 
.left-inner-addon {
    position: relative;
}
.left-inner-addon input {
    padding-left: 30px;    
}
.left-inner-addon i {
    position: absolute;
    padding: 10px 12px;
    pointer-events: none;
}

###Demo in jsFiddle

If you want to align the icon to the right of the text box, you can use right-inner-addon instead of left-inner-addon, like follows:

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

Which will look like this: