Font Awesome5 with input placeholder

Question

I want to add FontAwesome icon to input placeholder.

So I tried to write code like this.

[html]

<input type="text" placeholder="&#xF167;"/>

[css]

font-family:'Font Awesome 5 Brands' !important

It works fine. Youtube icon is in the input tag.

But When I add search icon(placeholder="") into the placeholder, It doesn't work properly.

What is the problem of my code?

Font awesome cheatsheet is here -> https://fontawesome.com/cheatsheet

Thanks.

Answer 1

Set the font-family as below, but also set the font-weight according to which style you want to load. For Solid, the font-weight would be 900.

input {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

Here's a working CodePen to demonstrate.

This does require that you're properly loading Font Awesome 5, and it will only work in the Webfonts with CSS method. In the CodePen example, only Font Awesome Free Solid is being loaded.

Here's a reference showing the font weights associated with each Font Awesome style.