Placeholder icons Contact Form 7 in Wordpress

Question

Im trying to customize a contact form with placeholder icons and text, using the 'Contact Form 7' plugin in Wordpress. The contact form is in a website I'm building using the 'Themify' theme which includes 'Font Awesome' (vector icons that I want to use as placeholder icons).

It displays as it should on Windows PC and Android mobile devices:

However, on Apple mobile devices (iPhone and iPad), the placeholder icon (pencil) and placeholder text ('Message (required)') are superposed. The placeholder icons and placeholder texts of the fields above (name, email, subject) display fine.

My code in the Contact Form 7 plugin is:

<p><span class="fa fa-user"></span>[text* your-name placeholder "Your Name (required)"]</p>

<p><span class="fa fa-envelope"></span>[email* your-email placeholder "Your Email (required)"]</p>

<p><span class="fa fa-folder"></span>[text your-subject placeholder "Subject"]</p>

<p><span class="fa fa-pencil"></span>[textarea* your-message placeholder "Message (required)"]</p>

[submit "Send"]

The CSS styling code is:

.wpcf7-form input {
border-radius:6px;                  /* Makes the edges rounded */
}
.wpcf7-form textarea {
border-radius:6px;          /* Makes the edges rounded */
}
.wpcf7-form .wpcf7-submit {     
background:#00a6ca;         /* This edit the button colour */
}
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea{
  text-indent: 35px;
}
.wpcf7 p{ position: relative; }
.wpcf7 p .fa{
  position: absolute;
  color: #666666;
  z-index: 100;
  font-size: 18px;
  top: 28%;
  left: 1.5%;
}
.wpcf7 p .fa-pencil{ top: 5%; left: 1.5%}

I would be grateful for any help that could solve this issue.

Answer 1

Ok, solved it!

Changed:

.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea{
  text-indent: 35px;

to:

.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea{
  padding-left: 45px;

And now it works on all platforms.