Font Awesome Icon Inside Input Field

The stylish input fields attract the users while filling out the form element. We can make the input stylish by defining color and shadow as well as placing an icon inside it. So, this tutorial explains how you can place the Font Awesome icon inside the input field using CSS.

Whether you are designing a contact us form or a login form. You may have tried to place an icon inside the input but did not get the best result that you were expected. If so, then you don’t need to worry anymore, as I’m going to describe all the necessary steps that you need to follow in order to place an icon inside the input.

The coding concept is that we need to create a container (div element) with the relative position. Inside this container, we’ll place both input and Font Awesome icon. Then, we’ll style the input and icon using CSS. You can check the final result of this project on the demo page.

Before getting started with coding make sure you have included Font Awesome CSS into the head tag of your HTML document. You can use the following CDN link to include the Font Awesome icons in your project.

<!-- Font Awesome CSS -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

Place Font Awesome Icon Inside Input

In HTML, create a div element with a class name "inputWithIcon", place your input and Font Awesome icon inside it as follows:

<div class="inputWithIcon">
  <input type="text" placeholder="Your name">
  <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
</div>

If you want to set a background color for the icon, just add a class name "inputIconBg" to the input wrapper. On the other hand, if you don’t want to add an icon inside a specific input, then you don’t need to create the wrapper element. The following is the complete HTML code for all the inputs.

<form class="cd-form">
<div class="inputWithIcon">
  <input type="text" placeholder="Your name">
  <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
</div>

<div class="inputWithIcon">
  <input type="text" placeholder="Email">
  <i class="fa fa-envelope fa-lg fa-fw" aria-hidden="true"></i>
</div>

<div class="inputWithIcon">
  <input type="text" placeholder="Phone Number">
  <i class="fa fa-phone fa-lg fa-fw" aria-hidden="true"></i>
</div>

<div class="inputWithIcon inputIconBg">
  <input type="text" placeholder="Your name">
  <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
</div>

<div class="inputWithIcon inputIconBg">
  <input type="text" placeholder="Email">
  <i class="fa fa-envelope fa-lg fa-fw" aria-hidden="true"></i>
</div>

<div class="inputWithIcon inputIconBg">
  <input type="text" placeholder="Phone Number">
  <i class="fa fa-phone fa-lg fa-fw" aria-hidden="true"></i>
</div>

<input type="text" placeholder="Age">
</form>

Style Your Inputs with CSS

First of all, style the form element that contains all input fields. Basically, the following CSS snippet for the form is optional as you may have already a styled form. Anyhow, if you want to style demo like form, define the max-width, margin, padding, and CSS box-shadow property as mentioned below:

 .cd-form{
    max-width: 640px;
    background: #fff;
    margin: 0 auto;
    padding: 15px 25px;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

After that, specify the basic styles for the text input field. Make it responsive by defining 100% value for the width property. Similarly, define the border, margin, and padding property.

input[type="text"] {
  width: 100%;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}

In order to show the active input, target the input with focus pseudo selector, and define the border color. Also, specify box-shadow property with the same color that you used for the border. You can check this tutorial to apply an animated border on input focus events.

input[type="text"]:focus {
  border-color: dodgerBlue;
  box-shadow: 0 0 8px 0 dodgerBlue;
}

Now, we need to leave some space from the left side of the input for icons. To do so, define the padding-left property with the 40px value. If you want to place your icon on the right side of the input, use the padding-right property for the following selector.

.inputWithIcon input[type="text"] {
  padding-left: 40px;
}

Keep the relative position for the inputWithIcon class. On the other hand, define the absolute position for the i element that contains the Font Awesome icon. Similarly, specify the left value as 0, padding, and color property for the icon.

.inputWithIcon {
  position: relative;
}

.inputWithIcon i {
  position: absolute;
  left: 0;
  top: 8px;
  padding: 9px 8px;
  color: #aaa;
  transition: 0.3s;
}

Target the i element with input focus selector in order to make active along with the input field. As we defined the dodgerBlue color for the input border, define the same color for this element.

.inputWithIcon input[type="text"]:focus + i {
  color: dodgerBlue;
}

If you want to use a background color for the icon, define the CSS styles for the inputIconBg class as described below:

.inputWithIcon.inputIconBg i {
  background-color: #aaa;
  color: #fff;
  padding: 9px 4px;
  border-radius: 4px 0 0 4px;
}

Finally, define the active style for the icon that has a background color. You are not limited to use the same color, you can use any valid color value according to your needs.

.inputWithIcon.inputIconBg input[type="text"]:focus + i {
  color: #fff;
  background-color: dodgerBlue;
}

You have done it! Hopefully, you have successfully placed Font Awesome icon inside the input field with the help of this tutorial. If you any questions or suggestions let me know by comment below.