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 ? do anyone know how to ?

        <input class="form-control far fa-user" type="text" placeholder="&#xf007 Your Username">

回答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,#000 0); /* you may need to adjust the 1.2em based on your case */
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color: transparent;
}

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

回答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

来源：https://stackoverflow.com/questions/61924532/how-to-design-font-awesome-icon-in-placeholder

标签

html

css

bootstrap-4