WordPress中的占位符图标Contact Form 7

我试图使用Wordpress中的” Contact Form 7″插件自定义带有占位符图标和文本的联系表单。联系人表单位于我正在使用” Themify”主题构建的网站中, 该主题包括” Font Awesome”(我想用作占位符图标的矢量图标)。

它在Windows PC和Android移动设备上应显示为：

但是, 在Apple移动设备(iPhone和iPad)上, 占位符图标(铅笔)和占位符文本(“消息(必填)”)是重叠的。上面的字段(名称, 电子邮件, 主题)的占位符图标和占位符文本显示良好。

我在Contact Form 7插件中的代码是：

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

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

对于可以解决此问题的任何帮助, 我将不胜感激。

#1

好, 解决了！

已更改：

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

至：

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

现在, 它适用于所有平台。

#2

联系表7代码：

[text* your-name "Name"]

[email* your-email "Email"]

[text your-subject "Subject"]

[textarea your-message "Message"]

[submit "Submit "]

CSS代码

.wpcf7-submit {
  font-family: FontAwesome;
}

我从本教程中获得了带有图标的联系表7的更多详细信息