Hello guys in this tutorial we will add icon inside input field using Html And Css
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Icon Inside Input Field</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>How to add icon inside input fields</h1>
<div class="form-outer">
<div class="container">
<form class="form">
<div class="form-input">
<span class="icon"><i class="fa fa-envelope" aria-hidden="true"></i></span>
<input type="email" name="email" placeholder="Enter your email">
</div>
<div class="form-input">
<span class="icon"><i class="fa fa-lock" aria-hidden="true"></i></span>
<input type="password" name="password" placeholder="Enter your password">
</div>
</form>
</div>
</div>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
@import url("https://fonts.googleapis.com/css?family=Lato:300,400|PT+Sans:400,700");
* {
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
}
body {
height: 100vh;
background: #4b00ff;
}
.form-outer {
max-width: 300px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 90%;
max-width: 1160px;
margin: auto;
}
h1 {
text-align: center;
color: #fff;
padding: 50px 0;
}
.form-input {
margin: 10px auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
input {
border: 2px solid #eee;
padding: 5px 10px 5px 50px;
font-size: 18px;
line-height: 30px;
outline: 0;
display: block;
width: 100%;
}
.icon {
position: absolute;
left: 15px;
top: 0;
font-size: 25px;
color: #4b00ff;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}