Q: How do I add an icon to my login page?
A: After reading and watching the following article and tutorial, you will able to create a login form or page with the icon in the input field.
Hello readers, today in this blog I'm going to create a login form and add some social media and font awesome icons into the login form by using HTML & CSS. In an earlier blog, I have shared How to Create a Responsive Sign Up Form, and now let's get into the login form.
What is Login Form or Page?
In the easiest way, we can say, login form means is an entry form where users need to enter their identification (phone number or email address and password ) to enter in the particular webpage. All users have their unique email address or phone and password.
As you can see on the given image of our Login Form with the icon. At the top, I have added two social media login buttons, at the bottom of this I have created two input fields with a font awesome icon. You can also add images of icons, it's up to you. By giving position absolute, we can ad
How do you put an icon in Input Field?
Following are the CSS code to put icons inside the input files and remember that the input field should be relative.
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
You Might Like This:
CSS Animated Login Form
Responsive Login Form Form
Responsive Registration Form
Login Form With Social Media Icons [Source Code]
You Can Download All source code file from this link. Click here to download source code files
Top comments (0)