Add icon left to placeholder for custom field in contact form 7?

[koy0616]

Hi support team,

May I know how to add a icon before placeholder text in a specific field in contact form 7?

here is my current form, I added tel and model field in the form.
[text name placeholder “稱呼”]
[email* email placeholder “電郵地址”]
[tel* tel placeholder “聯絡電話”]
[text model placeholder “牌子及型號”]
[textarea message 40×3 placeholder “故障情況”]
[submit “即時報價”]

I created tel field which i want to place a phone icon before placeholder. I think it need some css work? I will do it myself for other field after you show me how to add one for “tel”. Thanks.

p.s. the attached screenshot shows that these new field without icon at the left side.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Add this to your custom css:

span.wpcf7-form-control-wrap.email::before {
  color: #999;
  content: "";
  font-family: "nucleo-interface";
  left: 15px;
  position: absolute;
  top: 10px;
}

and replace email with the name of your field. You will also need to put the content code for the phone icon in content: “”;

– Kyle

[koy0616]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Your code is incorrect. The right code is:-

span.wpcf7-form-control-wrap.your-email:before {
color: #999;
content: "\f003" !important;
font-family: FontAwesome !important;
left: 15px;
position: absolute;
top: 10px;
}

Thanks
Mohammad