html - fontawesome icon not appear in place holder

Question

in my code below i'm trying to use an icon in placeholder but it's not appearing , is there a way to solve this?

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

<div class="form-group">
                <input
                  class="form-control empty" 
                  v-model="login.password"
                  label="Password"
                  type="password"
                  minlength="6"
                  placeholder="&#xF002;"
                  required
                />

question from:https://stackoverflow.com/questions/65888834/fontawesome-icon-not-appear-in-place-holder

Answer 1

FontAwesome 5

Uses the font-family: Font Awesome 5 Free;

input {
  font-family: 'Font Awesome 5 Free';
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/solid.min.css" rel="stylesheet"/>

<input
    class="form-control empty" 
    v-model="login.password"
    label="Password"
    type="password"
    minlength="6"
    placeholder="&#xF002;"
    required
/>