Wordpress 中的占位符圖標 Contact Form 7

Question

我嘗試使用 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%}

我將不勝感激任何可以解決此問題的幫助。

Answer 1

好的，解決了！

更改：

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

到：

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

現在它適用於所有平台。

Answer 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 的更多詳細信息