如何将占位符图标放入联系表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>

1. 要将图标放入占位符，我使用了以下代码，但只有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%;
}