title: How to put placeholder icon into contact form 7?
body: <p>I am trying to put the icon as a placeholder into contact form 7 with following codes. There are 3 icons, but only 1 icon was put successfully. Is there anybody can help check the issue?</p>
  
  <ol>
  <li>This is my code for contact form.</li>
  </ol>
  
  <pre><code>&lt;p&gt;&lt;span class="fa fa-user"&gt;&lt;/span&gt;[text* your-name placeholder:"YOUR NAME"] &lt;/div&gt;
  &lt;p&gt;&lt;span class="fa fa-envelope"&gt;&lt;/span&gt;[email* your-email placeholder:"YOUR EMAIL"] &lt;/p&gt;
  &lt;p&gt;&lt;span class="fa fa-pencil"&gt;&lt;/span&gt;[textarea your-message placeholder:"YOUR MESSAGE"] &lt;/p&gt;
  &lt;p style=”text-align: center;”&gt;[submit class:btn "Send"]&lt;/p&gt;
  </code></pre>
  
  <ol start="2">
  <li>To put icon into placeholder, I used the codes below, but only fa-user icon was put into placeholder successfully. The others are still in the labels</li>
  </ol>
  
  <pre><code>div.wpcf7 {
      text-align: center;
  }
  
  .wpcf7 .wpcf7-text,
  .wpcf7-form-control .wpcf7-textarea {
    padding-left: 45px;
  }
  
  .wpcf7 p { position: relative; }
  .wpcf7 p .fa {
    position: absolute;
    color: #666666;
    z-index: 100;
    font-size: 18px;
    top: 18%;
    left: 3%;
  }
  </code></pre>