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
How to create a form with icons using CSS?
Creating a form with icons enhances user experience by providing visual cues for different input fields. CSS flexbox and icon fonts like Font Awesome make it easy to align icons with input fields.
Syntax
.fieldContainer {
display: flex;
}
.icon {
/* Icon styling */
}
.field {
/* Input field styling */
}
Example
The following example creates a registration form with icons for username, email, password, and date of birth fields −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
* {
box-sizing: border-box;
}
h1 {
text-align: center;
color: #333;
}
form {
max-width: 500px;
margin: auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.fieldContainer {
display: flex;
width: 100%;
margin-bottom: 15px;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.icon {
font-size: 18px;
padding: 15px;
background: #2c3e50;
color: white;
min-width: 50px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.field {
font-size: 16px;
width: 100%;
padding: 15px;
outline: none;
border: none;
border-left: 1px solid #ddd;
}
.field:focus {
border-left: 3px solid #3498db;
background-color: #f8f9fa;
}
.btn {
font-size: 18px;
background-color: #3498db;
color: white;
padding: 15px 20px;
border: none;
cursor: pointer;
width: 100%;
border-radius: 5px;
margin-top: 10px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<form action="/action_page.php">
<div class="fieldContainer">
<i class="fa fa-user icon"></i>
<input class="field" type="text" placeholder="Username" name="username" required />
</div>
<div class="fieldContainer">
<i class="fa fa-envelope icon"></i>
<input class="field" type="email" placeholder="Email Address" name="email" required />
</div>
<div class="fieldContainer">
<i class="fa fa-lock icon"></i>
<input class="field" type="password" placeholder="Password" name="password" required />
</div>
<div class="fieldContainer">
<i class="fa fa-calendar icon"></i>
<input class="field" type="date" placeholder="Date of Birth" name="dob" />
</div>
<button type="submit" class="btn">Register</button>
</form>
</body>
</html>
A centered registration form with a clean white background and shadow appears. Each input field has a dark blue icon on the left (user, envelope, lock, calendar) followed by the input area. The form includes username, email, password, and date of birth fields with a blue "Register" button at the bottom.
Key Points
-
Flexbox Layout: The
display: flexproperty aligns icons and input fields horizontally - Icon Integration: Font Awesome icons provide visual context for each field type
- Responsive Design: The form adapts to different screen sizes using flexible widths
- Focus States: Input fields change appearance when focused for better user feedback
Conclusion
Forms with icons improve usability by making field purposes immediately clear. Using flexbox for layout and icon fonts for graphics creates a professional, accessible form design that works across all devices.
Updated on: 2026-03-15T14:37:20+05:30
799 Views
Advertisements