How to Add Font Awesome Icons to Your Input Fields

Using icons in web forms enhances the forms' usability as the icons add recognizability for the form fields. More often than not, visual elements are easier to understand and appeal to more people than words. Users can instantly figure out what the form field is asking for by looking at the icon inside the form field. In this tutorial, we'll use FontAwesome to make the web forms more user-friendly and add a touch of personality. FontAwesome is a popular icon toolkit that offers a very wide variety of icons. Since it is easy to use and highly customizable, it can be used in many ways in a web development project. 

It is important that you include the Font Awesome CDN on any web page where you intend to use Font Awesome icons. Simply copy and paste the link below and include it in your web page(s) to activate Font Awesome. The code below also includes the Bootstrap CDN.

HTML

Copy and paste the code in your HTML file:

Above, we have a simple login form with two input fields: email/username and password. At the top we a div element that contains the logo. You can simply change the image link with your own logo image link. Under that, we have our form element. We have two div containers with a classname of form-group. Inside these div containers, we have three elements.

-  A label tag for the form 

- The input field

- i tag for FontAwesome: 

Note that the absolute positioning of the icons is necessary, otherwise, the icons will appear outside of the input boxes. Bootstrap offers an easy way to position elements: you can simply add a position-absolute class inside the tag. That way, you don't have to add the positioning rule in the CSS as an extra code.

CSS

Once we build the form in HTML, the CSS is pretty straightforward. First, we select the icon class and adjust the positioning then we set their font-family to FontAwesome and then adjust the margins, padding, and font styles. 

And there we have it. You can check out the JSFiddle below to see how it looks before committing to its use: