字体真棒图标

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。