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 with an icon using HTML and 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%);
For getting the real example of this logging form and how all code works, I recommend you to watch the following video tutorial of a login form with an icon.
Login Form with Icons using HTML and CSS | Video Tutorial
As you have seen on the given video tutorial of animated login form with font awesome icons and a social media login button. I will provide the CDN link of the font awesome below. To create this login form design, I have used HTML and CSS only.
If you have general knowledge about HTML & CSS then you can easily create this type of login page. Those friends who are feeling difficult to make this form, don't worry I have provided all source code files below. You can also directly download all source code files.
You Might Like This:
Login Form with Icon using HTML and CSS | Free Source Code
To paste the given codes of this Login Form with Icon, you need to create two files, one is an HTML file and another is a CSS file. After creating these two files you can copy-paste the given codes in your file. Click on the following download button to download source code files.
HTML CODE:
CSS CODE: