How To Design Font Awesome Icon In Placeholder?

Hello people i want to change color only of font awesome icon on placeholder but when i change color of placeholder also it change color of text how to customize color only icon

Solution 1:

You can consider a trick using background coloration combined with :placeholder-shown

input {
  font-size:40px;
  margin:5px;
}
input:placeholder-shown {
  color:transparent;
  background:linear-gradient(to right, red 1.2em,#0000); /* you may need to adjust the 1.2em based on your case */
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color: transparent;
}

<linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"><inputclass="form-control far"type="text"placeholder="&#xf007 Your Username"><br><inputclass="form-control far"type="text"placeholder="&#xf007 Your Username"style="font-size:20px;"><br><inputclass="form-control far"type="text"placeholder="&#xf007 Your Username"style="font-size:10px;">

Solution 2:

You cannot set separate text colors for separate parts of the same placeholder attribute. You may want to consider using a separate <i> or svg version of the font awesome icon and include it as a separate asset, example: Put icon inside input element in a form