Html Data-Icon messing with input margins - html

Question

I'm trying to insert a data-icon to two input fields, but they keep shifting my input fields to the right, like they where adding a margin-left to it.
I'm using z-index:2 to the icons in order to keep them floating above the fields and they do, but the added margin is still there.
Here's my css:
#loginBox input#username, #loginBox input#password {
height: 20px;
width: 120px;
padding: 5px 5px 5px 32px;
border: 1px solid rgb(178, 178, 178);
box-sizing : content-box;
border-radius: 3px;
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
transition: all 0.2s linear;
}
#loginBox [data-icon]:before {
content: attr(data-icon);
font-family: FontomasCustomRegular;
color: #999;
position: relative;
left: 25px;
z-index: 2;
}
And here's a screenshot:
Any thoughts?
Thanks.

Answer 1

Sanjeev and Stéphanie Walter's code in nearly identical
http://www.infotuts.com/email-verification-php/
http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/
[data-icon]:after {
content: attr(data-icon);
font-family: 'FontomasCustomRegular';
color: rgb(106, 159, 171);
position: absolute;
left: 10px;
top: 35px;
width: 30px;
}
position: absolute;