set font awesome icon into textbox

Question

I have problems set i class into textbox for, my actual view:

and I want something like this:

How can I do that? There is my code (razor):

<div class="row">

        <!-- feedback -->
        <article class="feedback">
            <div class="widget-title">Deja un mensaje </div>

             @using (Html.BeginForm("Contact_Partial", "ContactModels", FormMethod.Post))
    {

            <h6>Campos Requeridos*</h6>
            <br />

            @*<div class="input-group">*@

             <div class="col-md-9">
                 @*@Html.LabelFor(model => model.Name, "Nombre*", new { @class = "pull-left" })*@

                 <i class="fa fa-user appointment"></i>  @Html.TextBoxFor(model => model.Name, new { @class = "form-control", @style = "width:100%", @placeholder = "Nombre*" })
                     @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })

            </div>

             <br />

             <div class="col-md-9">        
                 <i class="fa fa-envelope appointment"></i> @Html.TextBoxFor(model => model.Email, new { @class = "form-control", @style = "width:100%", @placeholder = "Email*", @type = "email" })

                     @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })


            </div>

             <br />



 <div class="col-md-9">

    <i class=" fa fa-align-left appointment"></i>@Html.TextAreaFor(model => model.Comments, new { @class = "form-control", @style = "width:100%", @placeholder = "Mensaje*" })
     @Html.ValidationMessageFor(model => model.Comments, "", new { @class = "text-danger" })
 </div>

HTML CODE:

  <article class="feedback">
            <div class="widget-title">Deja un mensaje </div>

 <form action="/ContactModels/Contact_Partial/1" method="post">                    <h6>Campos Requeridos*</h6>
                 <br />
                 <div class="col-md-9">


                     <i class="fa fa-user appointment"></i>  <input class="form-control" data-val="true" data-val-required="Es necesario que ingrese su nombre" id="Name" name="Name" placeholder="Nombre*" style="width:100%" type="text" value="" />
                         <span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>

                 </div>
                 <br />
                 <div class="col-md-9">        
                     <i class="fa fa-envelope appointment"></i> <input class="form-control" data-val="true" data-val-required="Es necesario que ingrese su correo" id="Email" name="Email" placeholder="Email*" style="width:100%" type="email" value="" />

                         <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>


                 </div>
                 <br />
     <div class="col-md-9">

         <i class=" fa fa-align-left appointment"></i><textarea class="form-control" cols="20" data-val="true" data-val-minlength="Es necesario que ingrese al menos 10 caracteres" data-val-minlength-min="10" data-val-required="Ingrese algún comentario por favor" id="Comments" name="Comments" placeholder="Mensaje*" rows="2" style="width:100%">

                    <input type="submit" value="Enviar" class="btn button" /> 
                </div>
 </form>
         </article>
     </div>

AND CSS (If I don't use it, it's the same problem, icon appears above the text)

.widget-appointment {
display: none;
 }

 .widget-appointment i,i.appointment{
   position:absolute;
   z-index: 1;
   top: 0;
   left: 0;
   width: 50px;
   height: 50px;
   font-size: 24px;
   line-height: 50px;
   text-align: center;
   color: #fff;
 }
 i.appointment{
   position:relative;
   margin-right:5px;
   margin-bottom:5px;
 }
.widget-appointment i:after,i.appointment:after {
   content: '';
   position: absolute;
   top: 50%;
   left: 100%;
   margin-top: -4px;
   border-top: 4px solid transparent;
   border-bottom: 4px solid transparent;
   border-left-width: 4px;
   border-left-style: solid; 
 }
 .widget-appointment input,
 .widget-appointment textarea {
  height: 50px;
  padding: 13px 10px 13px 65px;
 }

 .widget-appointment .captcha-wrapper input{
   padding: 13px 6px;
 }

 .widget-appointment textarea {
  height: auto;
 }
.widget-appointment .row {
  position: relative;
  margin-bottom: -1px;
 }

I don't know how can I put an into textbox area, I thinks that's the problem So, thanks for reading , any help is very appreciated

Answer 1

Detail : Firstly Remove br Tags , apply absolute class for i tag, and apply a relative div for control absolute position,

<div class="col-md-9">
<div class="relative">
     <i class="fa fa-user appointment"></i> 
    <input type="text" value="" style="width:100%" placeholder="Nombre*" name="Name" id="Name" data-val-required="Es necesario que ingrese su nombre" data-val="true" class="form-control"/>
    <span data-valmsg-replace="true" data-valmsg-for="Name" class="field-validation-valid text-danger"></span>

 </div>

Css here :

.relative{position:relative;}                
.appointment{position:absolute;}
input, textarea{padding-left:50px;}