bootstrap icon for username and password - css

Question

I am designing login page. Here I am adding icons for username and password, when I add icons along with icons someother icons also adding how to resolve this . Here is my code.
<div class="left-inner-addon ">
<i class="icon-user"></i>
<input type="text" placeholder="User Name" name='j_username' >
</div></div>
and css is as follow,
<style type="text/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;
}
</style>
and I dont have reputation to post pic of the login form .

Answer 1

I got an idea of what you are facing, according to the current standards of Twitter Bootstrap, you just have to use the following code to achieve what you want. I had tested it on live server and it is working fine.
Just replace your HTML Code by the following code :
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-user"></span>
<input type="text" class="form-control" placeholder="User Name" name='j_username'>
</div>
I hope this help.

Answer 2

I am writing a new answer for what you asked. Follow this code. This will definitely help.
Here's the HTML for the text box:
<div class="input-group">
<input type="text" placeholder="User Name" name='j_username' id="funkystyling" />
</div>
Here's the CSS for the image on the left:
#funkystyling {
background: white url(/path to icon.png) left no-repeat;
padding-left: 17px;
}
And here's the CSS for the image on the right:
#funkystyling {
background: white url(/path to icon.png) right no-repeat;
padding-right: 17px;
}

Answer 3

With Boostrap 2.3.2
HTML
<div class="left-inner-addon ">
<i class="icon-user"></i>
<input type="text" class="form-control" placeholder="User Name" name='j_username' >
</div>
CSS
.left-inner-addon {
position: relative;
}
.left-inner-addon input {
padding-left:20px;
height:20px;
}
.left-inner-addon i {
position: absolute;
margin:7px 5px;
}
JSFFIDLE