набора шрифтов удивительного значок в текстовое поле

Question

Я проблемы установить я класс в текстовое поле для, моего фактического зрения:

и я хочу что-то вроде этого:

Как я могу это сделать ? Существует мой код (бритва):

<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 КОД:

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

И CSS (если я не использую его, это то же самое проблема, значок появляется над текстом)

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

Я не знаю, как я могу Погружаю в область текстового поля, я думаю, что это проблема Итак, спасибо за чтение, любая помощь очень ценится

Answer 1

детали: во-первых Удалить BR тег, применять абсолютный класс для я помечать и применить относительный DIV для управления абсолютной позиции,

<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 здесь:

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