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.
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.
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Login Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
</head>
<body>
<div class="main_div">
<div class="title">Login Form</div>
<div class="social_icons">
<a href="#"><i class="fab fa-facebook-f"></i> <span>Facebook</span></a>
<a href="#"><i class="fab fa-twitter"></i><span>Twitter</span></a>
</div>
<form action="#">
<div class="input_box">
<input type="text" placeholder="Email or Phone" required>
<div class="icon"><i class="fas fa-user"></i></div>
</div>
<div class="input_box">
<input type="password" placeholder="Password" required>
<div class="icon"><i class="fas fa-lock"></i></div>
</div>
<div class="option_div">
<div class="check_box">
<input type="checkbox">
<span>Remember me</span>
</div>
<div class="forget_div">
<a href="#">Forgot password?</a>
</div>
</div>
<div class="input_box button">
<input type="submit" value="Login">
</div>
<div class="sign_up">
Not a member? <a href="#">Signup now</a>
</div>
</form>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
html,body{
display: grid;
height: 100vh;
place-items:center;
background: #be2edd;
}
.main_div{
width: 365px;
background: #fff;
padding: 30px;
border-radius: 5px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}
.main_div .title{
text-align: center;
font-size: 30px;
font-weight: 600;
}
.main_div .social_icons{
margin-top: 20px;
display: flex;
justify-content: center;
}
.social_icons a{
display: block;
height: 45px;
width: 100%;
line-height: 45px;
text-align: center;
border-radius: 5px;
font-size: 20px;
color: #fff;
text-decoration: none;
transition: all 0.3s linear;
}
.social_icons a span{
margin-left: 5px;
font-size: 18px;
}
.social_icons a:first-child{
margin-right: 5px;
background: #4267B2;
}
.social_icons a:first-child:hover{
background: #375695;
}
.social_icons a:last-child{
margin-left: 5px;
background: #1DA1F2;
}
.social_icons a:last-child:hover{
background: #0d8bd9;
}
form {
margin-top: 25px;
}
form .input_box{
height: 50px;
width: 100%;
position: relative;
margin-top: 15px;
}
.input_box input{
height: 100%;
width: 100%;
outline: none;
border: 1px solid lightgrey;
border-radius: 5px;
padding-left: 45px;
font-size: 17px;
transition: all 0.3s ease;
}
.input_box input:focus{
border-color: #be2edd;
}
.input_box .icon{
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
color: grey;
}
form .option_div{
margin-top: 5px;
display: flex;
justify-content: space-between;
}
.option_div .check_box{
display: flex;
align-items: center;
}
.option_div span{
margin-left: 5px;
font-size: 16px;
color: #333;
}
.option_div .forget_div a{
font-size: 16px;
color: #be2edd;
}
.button input{
padding-left: 0;
background: #be2edd;
color: #fff;
border: none;
font-size: 20px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s linear;
}
.button input:hover{
background: #a720c5;
}
form .sign_up{
text-align: center;
margin-top: 25px;
}
.sign_up a{
color: #be2edd;
}
form a{
text-decoration: none;
}
form a:hover{
text-decoration: underline;
}
If you face any difficulties while creating your Login Form or your code is not working as expected, you can download the source code files for this Login Page for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
