字體真棒圖標

Question

下面是我的代碼：

<fieldset data-role="controlgroup" data-type="vertical" data-mini="true"> 
 
<input type="text" name="username" id="username" placeholder="Username" data-wrapper-class="controlgroup-textinput ui-btn"> 
 
<input type="password" name="password" id="password" placeholder="Password" data-wrapper-class="controlgroup-textinput ui-btn"> 
 
</fieldset>

我的問題是我想添加字體真棒圖標，如FA-用戶和輸入文本字段內發鎖如下圖所示，而不是佔位符文本！這兩個輸入應該在控制組中。

下面

是樣本輸出的URL http://www.gfi.com/~/media/Images/GFI/Products/Downloads/Mobile%20app/Android/login.ashx

Answer 1

演示：http://jsfiddle.net/lotusgodkk/GCu2D/389/

HTML：

<fieldset data-role="controlgroup" data-type="vertical" data-mini="true"> 
    <label> <i class="fa fa-user"></i> 

     <input type="text" name="username" id="username" placeholder="Username" data-wrapper-class="controlgroup-textinput ui-btn" /> 
    </label> 
    <label><i class="fa fa-lock"></i> 

     <input type="password" name="password" id="password" placeholder="Password" data-wrapper-class="controlgroup-textinput ui-btn" /> 
    </label> 
</fieldset> 

CSS：

body, html { 
    width:100%; 
    height:100%; 
    background:#0079C1 
} 
fieldset { 
    margin:0 auto; 
    border:none; 
    display:inline-block; 
} 
label { 
    display:block; 
    background:#FFF; 
    padding:10px; 
} 
label:first-child { 
    border-radius:4px 4px 0 0; 
    border-bottom:1px solid #BFBFBF; 
} 
label:last-child { 
    border-radius:0 0 4px 4px; 
} 
label i, label input { 
    display:inline-block; 
    vertical-align:middle; 
    border:none; 
    background:inherit; 
    color:#BFBFBF 
} 
label i { 
    width:20px; 
    font-size:20px 
} 
label input { 
    padding:5px; 
    width:200px 
} 

你需要修改HTML一點點。既然你需要豐富的圖標，你將不得不使用額外的標籤。這可以通過使用背景圖像來完成，但爲此你不能使用fontawesome。