Font Awesome Icon before input - css

Question

I am trying to display fa-icon before my input.
My html code is as follows:
<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 is as follows:
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%;
}
The fa icon appears above the input field. I want the icon to appear before the input field. Is there any solution for that? I tried display inline and inline block properties. What can be the solution to this?

Answer 1

Solved : Easy and best to implement by using below concept:
.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

Try this:
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

try this
i {
color: #c0c2c7;
margin-right: 10px;
margin-top: 4px;
padding: 2px 8px;
float:left;
display: inline-block;
width: 10%;
}
and remove
.myinput
{
width:100%;
float:left;
}

Answer 4

use bootstrap classes to achieve this functionality like below
<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