ブートストラップお問い合わせフォーム7

Question

私の結果のスクリーンショットをコードと共に投稿し、iamが何をしようとしているのかを示すスクリーンショットを投稿しています。私はアイコンをプレースホルダに埋め込もうとしましたが、それは動作しないようです。

<div class="row"> 
<div class="col-md-6 col-sm-12"> 
    <label>Name</label> 
    <div class="form-field"> 
     <i class="fa fa-user"></i> 
     [text* name placeholder "Enter your name"] 
    </div> 
</div> 
<div class="col-md-6 col-sm-12"> 
    <label>E-Mail</label> 
    <div class="form-field"> 
     <i class="fa fa-envelope-o"></i> 
     [email* email-78 placeholder "Enter your email"] 
    </div> 
</div> 
</div> 
<div class="row"> 
    <div class="col-md-6 col-sm-12"> 
     <label>Telephone <span style="color:#aaa">(Optional)</span></label> 
     <div class="form-field"> 
      <i class="fa fa-phone"></i> 
      [text text-74 placeholder "Enter your phone"] 
     </div> 
    </div> 
    <div class="col-md-6 col-sm-12"> 
     <label>Website <span style="color:#aaa">(Optional)</span></label> 
     <div class="form-field"> 
      <i class="fa fa-globe"></i> 
      [text text-985 placeholder "Enter your website"] 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
     <label>Message</label> 
     <div class="form-field"> 
      <i class="fa fa-pencil-square-o"></i> 
      [textarea textarea-197 placeholder "Enter your message"] 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
     [submit class:btn class:btn-default "SEND YOUR MESSAGE"] 
    </div> 
</div> 

私の結果は以下のとおりです。

私はこれを達成したい：

は

Answer 1

は例の下に見つけて、それはあなたを助けるかもしれありがとうございました。

HTML

<input type="text" class="form-control iconDsp" placeholder="&#xf007;"/> 

CSSの表示アイコンにFontAwesomeフォントファミリをリンクするコード.iconDspクラス以下で

input.iconDsp{ 
    font-family: FontAwesome; 
    font-style: normal; 
    font-weight: normal; 
    text-decoration: inherit; 
}