how do you add a search icon, inside of a placeholder?

Question

I am just wanting to add a font awesome icon inside a placeholder. i have tried using the Unicode inside the placeholder but that doesn't work. i have also tried using pseudo elements but still does not work.

<input type="text"  name="search bar"  placeholder="search">

input{
width: 4%;
position: absolute;
right: 188px;
top: 24px;
background-colour: #000000;
}

::placeholder{
    colour: antique white;
}    

Answer 1

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<input style="font-family: FontAwesome;" placeholder='&#xf002 search' />