How to add icons inside input elements in HTML

Icons are very useful in user interfaces. They are used to visually aid understanding of different elements.

For example, just seeing the padlock icon can be indicative of the field being a password.

The <i> tag

In HTML, icons are added with the <i> tag. For it to be added inside the input elements, it must be added between the closing and opening tags of the elements in which you want the icon to be displayed.

For self-closing elements that do not have the closing tag, the <i> tag is placed right above the opening element tag, as in the case of the <input> element.

Code

In the code below, we use the fontawsome CDN to get our icons from the fontawsome library and place those icons in a form.

Explanation

In the snippet above, the <i> tags were placed above each of the input tags they were going to affect. The icons were called using the fontawesome fa fa_iconName syntax. Some basic styling was applied to the elements using CSS.

Another way to add an icon is to add it as a background of the input element by using the CSS background-image property. Let’s see the code example.