Как поместить значок заполнителя в контактную форму 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%;
}