Question

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

Answer 1

解决：使用以下概念轻松且最佳实施：

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

Answer 2

试试这个：

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

Answer 3

试试这个

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

并删除

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

Answer 4

使用bootstrap类来实现此功能，如下所示

<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

输入前字体真棒图标

4 个答案: