输入前的字体真棒图标

我想在输入前显示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

输入前的字体真棒图标

回答

相关问题