How to put an icon inside an input element in a form using CSS?

In this article, we will learn how to put an icon inside an input element in a form using CSS with the help of various examples.

To put an icon inside an input element for this, we are used the <i> tag and the <span> tag with the font awesome library icon. This icon can be placed by using the fa prefix before the icon's name.

Following are the link to add a font-awesome library to your webpage.

Following are the various examples of putting an icon inside an input element in a form using CSS.

Example 1:

Explanation:

We have created a basic form with icons inside input elements in the above example.

Output:

Following is the output of this example.

Example 2:

Explanation:

In the above example, we have created a login form with icon inside an input elements.

Output:

Following is the output of this example.