Css 输入前的字体图标

我试图在输入前显示fa图标。 我的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>

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图标显示在输入字段上方。我希望图标显示在输入字段之前。有什么解决办法吗？我尝试显示内联和内联块属性。解决这个问题的办法是什么？

试试这个：

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

试试这个：

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

试试这个

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

移除

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

试试这个

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

移除

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

---

解决方案：通过使用以下概念，易于实现：

.input{position:relative}
.icon包装{位置：绝对；显示：块；宽度：25px；高度：25px；左侧：1px；顶部：1px；}
.myinput{左填充：15px；}

---

解决方案：使用以下概念，实现起来简单且最佳：

.input{position:relative}
.icon包装{位置：绝对；显示：块；宽度：25px；高度：25px；左侧：1px；顶部：1px；}
.myinput{左填充：15px；}

---

使用引导类实现如下功能

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

---

使用引导类实现如下功能

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