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