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
Selected Reading
CSS to put icon inside an input element in a form
To place an icon inside an input element in a form using CSS, we can use Font Awesome icons and position them absolutely within a container. This technique creates an elegant and user-friendly form design.
Installation: Include the Font Awesome CDN in your HTML head section to access the icon library.
Syntax
.inputContainer {
position: relative;
}
.icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.field {
padding-left: 40px;
}
Method 1: Absolute Positioning
The most common approach uses absolute positioning to place the icon over the input field. The container must have position: relative to contain the absolutely positioned icon −
<!DOCTYPE html>
<html>
<head>
<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;
}
.inputContainer {
position: relative;
width: 300px;
margin-bottom: 15px;
}
.icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #666;
z-index: 1;
}
.field {
width: 100%;
padding: 12px 12px 12px 40px;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
.field:focus {
border-color: #4CAF50;
outline: none;
}
</style>
</head>
<body>
<form>
<div class="inputContainer">
<i class="fa fa-user icon"></i>
<input class="field" type="text" placeholder="Username">
</div>
<div class="inputContainer">
<i class="fa fa-envelope icon"></i>
<input class="field" type="email" placeholder="Email Address">
</div>
<div class="inputContainer">
<i class="fa fa-lock icon"></i>
<input class="field" type="password" placeholder="Password">
</div>
</form>
</body>
</html>
A form with three input fields appears, each containing an icon on the left side: user icon for username, envelope icon for email, and lock icon for password. The icons are positioned inside the input fields with proper spacing.
Method 2: Using Flexbox
An alternative approach uses flexbox to create a more flexible layout that automatically adjusts to content −
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.inputGroup {
display: flex;
align-items: center;
border: 2px solid #ddd;
border-radius: 4px;
width: 300px;
margin-bottom: 15px;
padding: 0 10px;
}
.inputGroup:focus-within {
border-color: #007bff;
}
.inputGroup i {
color: #666;
margin-right: 10px;
}
.inputGroup input {
border: none;
outline: none;
padding: 12px 0;
flex: 1;
font-size: 16px;
}
</style>
</head>
<body>
<form>
<div class="inputGroup">
<i class="fa fa-phone"></i>
<input type="tel" placeholder="Phone Number">
</div>
<div class="inputGroup">
<i class="fa fa-map-marker"></i>
<input type="text" placeholder="Address">
</div>
</form>
</body>
</html>
Two input fields appear with icons positioned using flexbox: a phone icon next to a phone number input and a location marker next to an address input. The border highlights when focused.
Key Points
- Use
position: relativeon the container for absolute positioning method - Add
padding-leftto the input to make space for the icon - The flexbox approach is more responsive and easier to maintain
- Include appropriate
z-indexto ensure icons appear above other elements
Conclusion
Both absolute positioning and flexbox methods effectively place icons inside input elements. The absolute positioning method offers precise control, while flexbox provides better responsiveness and cleaner code structure.
Updated on: 2026-03-15T14:43:35+05:30
4K+ Views
Advertisements