How to use Font Awesome icon in a placeholder with HTML?

Sometimes, we want to use Font Awesome icon in a placeholder with HTML.

In this artricl,e we’ll look at how to use Font Awesome icon in a placeholder with HTML.

How to use Font Awesome icon in a placeholder with HTML?

To use Font Awesome icon in a placeholder with HTML, we use the HTML entity for the icon we want to show.

For instance, we write

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

<input
  type="text"
  placeholder="&#xF002; Search"
  style="font-family: Arial, FontAwesome"
/>

to add the link element for the Font Awesome CSS.

Then we add an input with the  HTML entity in the placeholder to show the icon in the placeholder.

Conclusion

To use Font Awesome icon in a placeholder with HTML, we use the HTML entity for the icon we want to show.