Html Data-Icon搞乱了输入边距

Question

我正在尝试将数据图标插入两个输入字段，但是它们会将我的输入字段向右移动，就像它们向左边添加一个边距一样。

我正在使用z-index：2来图标，以使它们在字段上方浮动而且它们确实存在，但增加的边距仍然存在。

这是我的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;
}

这是截图：

有什么想法吗？

感谢。

Answer 1

Sanjeev和StéphanieWalter的代码几乎相同

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

位置：绝对;