Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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, we are creating a form containing multiple inputs. If we put the icon related to the form input field inside the input, we can create a better UI and attractive design for the application.
In this tutorial, we will use the font-awesome library to add the icon on the web page. Also, we will manipulate the CSS code to place the icon inside the input field.
Syntax
Users can follow the syntax below to place an icon inside the input field.
input { padding-left: 40px; }
i { position: absolute; left: 0; top: 11px; }
In the above syntax, we set padding for the input field. After that, we set the ‘absolute’ position for the icon and set the top position. Also, we can set the padding for the icon according to the requirements.
Example 1
In the example below, we created the div with a class name equal to the ‘form’. Also, we defined the div element for each input and set different class names according to the input it contains. We added the label, input element, and font awesome icon inside the div element.
In CSS, we set the style for the parent div of the input element. Also, we set the padding-left equal to 40px for the input element to set the icon in that place. Users can set padding according to the icon size.
After that, we set the absolute position for the icon. Also, we fixed the top position based on the input element’s position. Furthermore, we have set the padding for the icon and added the transition of 0.3 seconds.
Users can observe the icon inside the text input field in the output.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fileExtension, .filename { position: relative; display: flex; flex-direction: column; width: 300px; }
.fileExtension input, .filename input { padding-left: 40px; }
.fileExtension i, .filename i { position: absolute; left: 0; top: 11px; padding: 9px 8px; transition: 0.3s; }
</style>
</head>
<body>
<h3> Using the <i> CSS to place font Awesome </i> icons inside the input field </h3>
<div class="form">
<div class="filename">
<label> <b> filename </b> </label>
<input type="text" placeholder="Enter filename" name="filename" required>
<i class="fa fa-code"> </i>
</div> <br>
<div class="fileExtension">
<label> <b> File Extenssion </b> </label>
<input type="text" placeholder="Enter file extension" name="extension" required>
<i class="fa fa-code"> </i>
</div>
</div>
</html>
Example 2 (Using The:after Pseudo Class )
In this example, we used the ‘:after’ pseudo selector to set the icon in the input field. The pseudo selector removes the HTML element from the original flow of the web page and makes it independent.
Here, we added the input element inside the div element. In CSS, we set the input element's ‘position: relative’. After that, we used the ‘:after’ pseudo selector which will place the icon after the input element. We added the icon after the input using the CSS's specific code and ‘content’ property. Also, we set the right position for the icon after setting up the ‘absolute’ value for the ‘position’ property.
In the output, we can see that icon is placed on the right side of the input field.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.input {
display: inline-block;
position: relative;
}
.input:after {
position: absolute;
right: 6px;
font-family: 'FontAwesome';
content: '\f274';
}
</style>
</head>
<body>
<h3> Using the <i> CSS to place font Awesome </i> icons inside the input field </h3>
<div class="input">
<input type="text" placeholder="Enter date" />
</div>
</html>
Example 3
In the example below, we added the icon in the ‘span’ above the input in the HTML. In CSS, we set the left padding for the input element. Also, we set the absolute position for the icon element. After that, we change the position of the icon element so that we can put it inside the input element.
Users can see in the output that we added the error icon inside the input element.
<html>
<head>
<link rel = "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#input {
padding-left: 35px;
}
/* placing the icon */
.error {
position: absolute;
margin-top: 1.5px;
margin-left: 5px;
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<h2> Using the <i> CSS to place font Awesome </i> icons inside the input field </h2>
<span class = "fa fa-info-circle error"> </span>
<input name = "input" id = "input">
</html>
We learned to set the icon inside the input field in this tutorial. We can set the user icon inside the username input field, the call icon inside the phone number input field, the key icon inside the password input field, the inbox icon inside the email input field, etc.
Developers need to set the position icon inside the input field using the ‘absolute’ position and different positioning properties.
2K+ Views
