如何将占位符图标放入联系表单7？

Question

我试图将图标作为占位符放入联系表单7中，并带有以下代码。有3个图标，但只成功放置了1个图标。有人可以帮忙检查一下这个问题吗？

1. 这是我的联系表格代码。

<p><span class="fa fa-user"></span>[text* your-name placeholder:"YOUR NAME"] </div>
<p><span class="fa fa-envelope"></span>[email* your-email placeholder:"YOUR EMAIL"] </p>
<p><span class="fa fa-pencil"></span>[textarea your-message placeholder:"YOUR MESSAGE"] </p>
<p style=”text-align: center;”>[submit class:btn "Send"]</p>

2. 要将图标放入占位符，我使用下面的代码，但只有fa-user图标成功放入占位符。其他人仍在标签中

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

Answer 1

我用下面的代码解决了这个问题！

.wpcf7-form input[type="text"], input[type="email"], textarea {
    width:100% !important;
}

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

.wpcf7 p { position: relative; }
.wpcf7 p .fa-user, .wpcf7 p .fa-envelope {
  position: absolute;
  color: #666666;
  z-index: 100;
  font-size: 18px;
  top: 18%;
  left: 3%;
}

.wpcf7 p .fa-pencil {
  position: absolute;
  color: #666666;
  z-index: 100;
  font-size: 18px;
  top: 6%;
  left: 3%;
}