輸入前的字體真棒圖標

我想在輸入前顯示fa-icon。我的HTML代碼如下：輸入前的字體真棒圖標

<table width="788" border="0"> 
<tr> <td> <input type="hidden" name="c_id" id="c_id" value="<?php echo $id; ?>"> </td> </tr> 

    <tr> 
     <td width="150"><p> 
     <label for="firstname">Customer First Name</label> 
     </p> 
     <p> 
      <label class="input"> 
<i class="fa fa-user" aria-hidden="true"></i> 
<input class="myinput" type="text" name="firstname" id="fn" placeholder="First Name" value="<?php echo $firstname1; ?>" > 
     </label> 
     </p></td> 


     <td width="243"><p> 
     <label for="middlename">Customer Middle Name</label> 
     </p> 
     <p> 

     <label class="input"> 
     <i class="fa fa-user" aria-hidden="true"></i> 
     <input class="myinput" type="text" name="middlename" id="middlename" value="<?php echo $m_name2; ?>" placeholder="Middle Name"> </label> 
     </p></td> 
     <td width="250"><p> 
     <label for="lastname">Customer Last Name</label> 
     </p> 
     <p> 

     <label class="input"> 
     <i class="fa fa-user" aria-hidden="true"></i> 
     <input class="myinput" type="text" name="lastname" id="lastname" placeholder="Last Name" value="<?php echo $lastname3; ?> " > 
     </label> 
     </p></td></tr> 
</table>

CSS如下：

i { 
    color: #c0c2c7; 
    margin-right: 10px; 
    margin-top: 4px; 
    padding: 2px 8px; 
    float:left; 
} 
.myinput 
{ 
    width:100%; 
    float:left; 
} 
input 
{ 
    background-color: #3CBC8D; 
    color: white; 
    display: inline-block; 
    padding: 5px 10px; 
    float:left; 
    width:90%; 
}

的FA圖標出現上面的輸入字段。我希望圖標出現在輸入字段之前。有沒有解決方案？我嘗試顯示內聯和內聯塊屬性。什麼可以解決這個問題？

來源

2016-12-27 jack sparrow

解決：簡單和最佳利用下面的概念來實現：

.input{position:relative} 
 
    .icon-wrapper{position:absolute; display:block; width:25px; height:25px; left:1px; top:1px;} 
 
    .myinput{padding-left:15px;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 
    <label class="input"> 
 
    <span class="icon-wrapper"><i class="fa fa-user" aria-hidden="true"></i></span> 
 
    <input class="myinput" type="text" name="firstname" id="fn" placeholder="First Name" value="" > 
 
      </label>

來源

2016-12-27 07:13:07 santoshK

試試這個：

i.fa{ 
    color: #c0c2c7; 
    margin-right: 10px; 
    margin-top: 4px; 
    padding: 2px 8px; 
    //float:left; 
    display: inline-block; 
    width:10%; 
} 

.myinput 
    { 
    //width:100%; 
    //float:left; 
    } 

    input 
    { 
    background-color: #3CBC8D; 
    color: white; 
     display: inline-block; 
     padding: 5px 10px; 
     //float:left; 
    width:90%; 
    }

來源

2016-12-27 06:55:12 Taniya

這此功能不起作用 –

試試這個

i { 
    color: #c0c2c7; 
    margin-right: 10px; 
    margin-top: 4px; 
    padding: 2px 8px; 
    float:left; 
    display: inline-block; 
    width: 10%; 
}

，並刪除

.myinput 
{ 
    width:100%; 
    float:left; 
}

來源

2016-12-27 06:55:19

對不起沒有工作 –

使用自舉類來實現類似下面

<div class="input-group"> 
        <span class="input-group-addon"><i class="fa fa-user"></i></span> 
        <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> 
     </div>

More Examples

來源

2016-12-27 07:22:43 Dixit

輸入前的字體真棒圖標

回答

相關問題