Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to place Font Awesome icon to input field?
In many cases, developers require to place an icon inside the text input or particular HTML element. For example, when creating a form containing multiple inputs, placing icons related to each form field inside the input can create a better UI and more attractive design for the application.
In this tutorial, we will use the Font Awesome library to add icons to web pages and manipulate CSS code to place these icons inside input fields. Font Awesome provides scalable vector icons that can be customized with CSS properties like size, color, and positioning.
Syntax
Following is the basic syntax to place an icon inside an input field
.input-container {
position: relative;
}
input {
padding-left: 40px;
}
.icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
In the above syntax, we create a container with relative positioning, set left padding for the input field to make space for the icon, and position the icon absolutely within the container. The transform: translateY(-50%) centers the icon vertically within the input field.
Using Font Awesome Icons with CSS Positioning
The most common approach involves wrapping the input in a container, positioning the icon absolutely, and adding padding to the input to prevent text overlap with the icon.
Example
Following example demonstrates placing Font Awesome icons inside input fields using CSS positioning
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons in Input Fields</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.form-container { max-width: 400px; }
.input-group { position: relative; margin-bottom: 20px; }
.input-group input {
width: 100%;
padding: 12px 15px 12px 45px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #666;
font-size: 18px;
}
label { display: block; margin-bottom: 5px; font-weight: bold; }
</style>
</head>
<body>
<h2>Contact Form with Font Awesome Icons</h2>
<div class="form-container">
<div class="input-group">
<label>Username</label>
<input type="text" placeholder="Enter username">
<i class="fa fa-user"></i>
</div>
<div class="input-group">
<label>Email Address</label>
<input type="email" placeholder="Enter email">
<i class="fa fa-envelope"></i>
</div>
<div class="input-group">
<label>Phone Number</label>
<input type="tel" placeholder="Enter phone number">
<i class="fa fa-phone"></i>
</div>
<div class="input-group">
<label>Password</label>
<input type="password" placeholder="Enter password">
<i class="fa fa-lock"></i>
</div>
</div>
</body>
</html>
The output displays a form with icons positioned inside each input field
Contact Form with Font Awesome Icons Username: [? Enter username ] Email: [?? Enter email ] Phone: [? Enter phone number ] Password: [? Enter password ]
Using CSS Pseudo-selectors
Another approach uses the :after pseudo-selector to insert Font Awesome icons using CSS content property and Unicode values.
Example
Following example uses the :after pseudo-selector to place icons on the right side of input fields
<!DOCTYPE html>
<html>
<head>
<title>Icons with CSS Pseudo-selectors</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.input-wrapper {
position: relative;
display: inline-block;
margin: 10px 0;
}
.input-wrapper input {
padding: 12px 45px 12px 15px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
width: 250px;
}
.date-input:after {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-family: 'FontAwesome';
content: '\f073';
color: #666;
pointer-events: none;
}
.search-input:after {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-family: 'FontAwesome';
content: '\f002';
color: #666;
pointer-events: none;
}
</style>
</head>
<body>
<h2>Input Fields with Right-side Icons</h2>
<div class="input-wrapper date-input">
<input type="text" placeholder="Select date">
</div><br>
<div class="input-wrapper search-input">
<input type="text" placeholder="Search...">
</div>
</body>
</html>
The output shows input fields with icons positioned on the right side using CSS pseudo-selectors
Input Fields with Right-side Icons [Select date ?] [Search... ?]
Icon Positioning with Span Elements
This method uses <span> elements to wrap Font Awesome icons and positions them over the input fields using absolute positioning.
Example
Following example demonstrates icon placement using span elements
<!DOCTYPE html>
<html>
<head>
<title>Icons with Span Elements</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.field-container { position: relative; margin: 20px 0; width: 300px; }
.field-container input {
width: 100%;
padding: 15px 15px 15px 50px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
box-sizing: border-box;
}
.field-container input:focus {
border-color: #4CAF50;
outline: none;
}
.icon-span {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
color: #757575;
pointer-events: none;
}
.success { color: #4CAF50; }
.warning { color: #ff9800; }
.error { color: #f44336; }
</style>
</head>
<body>
<h2>Form Validation with Status Icons</h2>
<div class="field-container">
<input type="email" placeholder="Enter valid email">
<span class="icon-span fa fa-check-circle success"></span>
</div>
<div class="field-container">
<input type="text" placeholder="Required field">
<span class="icon-span fa fa-exclamation-triangle warning"></span>
</div>
<div class="field-container">
<input type="text" placeholder="Invalid input">
<span class="icon-span fa fa-times-circle error"></span>
</div>
</body>
</html>
The output displays form fields with colored status icons indicating validation states
Form Validation with Status Icons [? Enter valid email ] (green checkmark) [?? Required field ] (orange warning) [? Invalid input ] (red error)
Comparison of Methods
Following table compares the three approaches for placing Font Awesome icons in input fields
| Method | Advantages | Disadvantages | Best Use Case |
|---|---|---|---|
| CSS Positioning | Flexible positioning, easy to customize, works with any icon | Requires HTML structure changes | Forms with multiple input types |
| Pseudo-selectors | Pure CSS solution, no extra HTML elements | Limited to specific Unicode characters, harder to customize | Simple forms with standard |
4K+ Views
