How to add a Font Awesome icon to input field with HTML and CSS?

Spread the love

To add a Font Awesome icon to input field with HTML and CSS, we can set the value attribute.

For instance, we write

<input type="submit" class="search" value="&#xf002;" />

to add a submit button input with the value set to the icon.

Then we write

input[type="submit"] {
  font-family: "Font Awesome 5 Free";
  font-size: 1.3333333333333333em;
  font-weight: 900;
}

to set the font of submit inputs to the Font Awesome font with font-family: "Font Awesome 5 Free";.