How to put an icon in the input tag?

To add icon inside the input element the <i> tag and <span> tag are used widely to add icons on the webpages. To add any icons on the webpages or in some specific area, it needs the fontawesome link inside the head tag. The fontawesome icon can be placed by using the fa prefix before the icon’s name.

Html code

<!DOCTYPE html>
<html>
<head>
    <title>Add icon in input text</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <h3>Icons inside the input element</h3>
    
    <div style="max-width:400px;margin:auto">
    	<div class="input-icons">
    		<i class="fa fa-user icon"></i>
    		<input class="input-field" type="text" placeholder="Enter text">
    	</div>
    	<div class="input-icons">
    		<i class="fa fa-instagram icon"></i>
    		<input class="input-field" type="text" placeholder="Enter text">
    	</div>
    	<div class="input-icons">
    		<i class="fa fa-envelope icon"></i>
    		<input class="input-field" type="text" placeholder="Enter text">
    	</div>
    	<div class="input-icons">
    		<i class="fa fa-youtube icon"></i>
    		<input class="input-field" type="text" placeholder="Enter text">
    	</div>
    	<div class="input-icons">
    		<i class="fa fa-facebook icon"></i>
    		<input class="input-field" type="text" placeholder="Enter text">
    	</div>
    </div>
    
</body>
</html>

Css code

.input-icons {
	width: 100%;
	margin-bottom: 10px;
	float: left;
	border: 1px solid #000;
	border-radius: 3px;
}
.icon {
	padding: 10px;
	width: 15px;
}
.input-field {
	width: calc(100% - 65px);
	padding: 10px 10px 10px 0;
	left: 10px;
	border: none;
	outline: none;
}

kabeer

Added  Nov 14, 11:06 am

×
Google login
SignUp with Email
X