How do you include a Font Awesome icon and text in an input placeholder? [duplicate]

I'm making a text input and I'm trying to use a Font Awesome icon and text as a placeholder. The issue is that when I set font-family: "Font Awesome 5 Free", the icon and text does show but the text is sans-serif instead of the default font Roboto. When I set font-family: "Roboto", the text does use the Roboto font but the icon doesn't show. Of course, this is because Roboto doesn't have Font Awesome icons.

How do I make the text input so that it shows a Font Awesome icon and Roboto style text?

The website is available at http://zerafit.rf.gd/

Screenshot

HTML

<input type="search" placeholder="&#xf002; Search">

CSS

header nav input {
    border: 1px solid #555555;
    border-radius: 5px;
    padding: 5px 0;
    width: 100%;
    min-width: 150px;
    max-width: 300px;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 16px;
    text-align: center;
}