Use Font Awesome (5) icon in input placeholder text

Question

I've come across many ways to solve this using Font Awesome < 5, but I can't seem to solve this in any way using Font Awesome 5.

This is how many resources point to adding a Font Awesome icon in placeholder text.

<input style="font-family:FontAwesome !important" type="text" placeholder="&#xf167">

Answer 1

Remember to not use the general "Font Awesome 5" font family, you need to specifically end with the branch of icons you're working with. Here i am working the "Brands" category.

<input style="font-family:'Font Awesome 5 Brands' !important" type="text" placeholder="&#xf167">

For a more sophisticated solution you could implement a class that works specifically on the placeholder text of a class like this and add that class to you input. Useful if you want a different font-family on your input values.

.useFontAwesomeFamily::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-ms-input-placeholder { /* Microsoft Edge */
    font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::placeholder { /* Most modern browsers */
    font-family: "Font Awesome 5 Brands" !important;
}

And then add this class to your tag.

<input class="useFontAwesomeFamily" type="text" placeholder="&#xf167;">

Answer 2

You can also the fas class to the input.

Just bear in mind that this solution and any font-awesome style changing solutions will also change the style of any text preceding or following the unicode icon.

Answer 3

This might help someone out there as I had the same issue.

The Branch for Regular icons is Font Awesome 5 Free. However, if you need to use solid icons, just add the font-weight: 900; property to the inline CSS.

<style="font-family: Circular, 'Font Awesome 5 Free' !important; font-weight: 900;>

The placeholder text will be bold, I'm still trying to find a solution for this, I don't know if there's another way but it works for me for now.

I hope it helps.