How To Add Font Awesome Icons To Your Input Fields - Solodev

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.

<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

HTML

Copy and paste the code in your HTML file:

<section class="container min-container py-md-5 mt-4"> <div class="card-panel p-sm-5 position-relative"> <div class="text-center"> <img src="https://raw.githubusercontent.com/solodev/input-fields-with-fontawesome/master/images/lunar-xp-logo.png" alt="Logo" class="img-fluid w-50"> <h1 class="h2 mt-5">Welcome, Explorer!</h1> </div> <form id="loginForm" class="mt-5"> <p class="small mb-2 text-scarlet"></p> <div class="form-group position-relative"> <label for="email" class="sr-only">Email</label> <input class="form-control input-lg rounded-0" id="email" name="email" type="text" placeholder="Email / Username" required=""> <i class="fa fa-user fa-lg position-absolute"></i> </div> <label for="password" class="pull-left sr-only">Password</label> <div class="position-relative"> <input class="form-control input-lg rounded-0" id="password" name="password" type="password" placeholder="Password" required=""> <i class="fa fa-lock fa-lg position-absolute"></i> </div> <div class="text-center my-4"> <button class="btn btn-primary text-white btn-lg text-uppercase" type="submit">Log in</button> </div> </form> </div> </section>

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:

<i class="fa fa-user fa-lg"></i> <!-- 1) using an <i> element to reference the icon 2) this icon's style prefix == fa 3) icon name == user 4) icon size == large -->

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.

/* Optional styling for the form container box */ .card-panel { box-shadow: rgba(0, 0, 0, 0.1) 0 5px 40px, rgba(0, 0, 0, 0.1) 0 5px 10px; border-bottom: 10px solid transparent; transition: box-shadow 0.25s; padding: 20px; margin: 0.5rem 0 1rem; border-radius: 2px; background-color: #fff; } /* Font Awesome Icons */ .form-group a i { font-family: FontAwesome; margin: 0 auto; font-size: 5rem; font-style: normal; } .min-container .card-panel form .fa { top: 13px; right: 1rem; } /* Media Queries */ @media (min-width: 768px) { .min-container { max-width: 650px; } } .min-container { margin: 0 auto; }

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