Значки-заполнители Контактная форма 7 в Wordpress ⇐ CSS

[Anonymous]

Я пытаюсь настроить контактную форму с помощью значков-заполнителей и текста, используя плагин Contact Form 7 в Wordpress. Контактная форма находится на веб-сайте, который я создаю с использованием темы Themify, которая включает в себя Font Awesome (векторные значки, которые я хочу использовать в качестве значков-заполнителей).
Она отображается как это должно быть на ПК с Windows и мобильных устройствах Android:


Однако на мобильных устройствах Apple (iPhone и iPad) значок заполнителя (карандаш) и текст заполнителя («Сообщение (обязательно)») накладываются друг на друга. Значки-заполнители и тексты-заполнители в полях выше (имя, адрес электронной почты, тема) отображаются нормально.
Мой код в плагине Contact Form 7:

[text* your-name placeholder "Your Name (required)"]

[email* your-email placeholder "Your Email (required)"]

[text your-subject placeholder "Subject"]

[textarea* your-message placeholder "Message (required)"]

[submit "Send"]

Код оформления CSS:
.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%}


Подробнее здесь: https://stackoverflow.com/questions/439 ... -wordpress