input中的icon图标

//html代码

<div class="input_con">
<p >
<i class="iconfont_user"></i>
<input id="username" name="username" type="text" autocomplete="off" placeholder="请输入用户名" />
</p>
</div>
<div class="input_con">
<p>
<i class="iconfont_pass"></i>
<input id="password" name="password" type="password" placeholder="请输入密码" />
</p>
</div>

 

//css代码

.iconfont_user {
display: inline-block;
height: 27px;
width: 29px;
background-repeat: no-repeat;
position: absolute;
z-index:9999;　　//让图标显示在图层的最顶层
background-image: url(../images/input-user.png);
margin-top: 36px;
margin-left: 20px;
}
.iconfont_pass {
display: inline-block;
height: 27px;
width: 29px;
background-repeat: no-repeat;
position: absolute;
z-index:9999;　　//让图标显示在图层的最顶层
background-image: url(../images/input-pass.png);
margin-top: 36px;
margin-left: 20px;
}