How to put an icon inside an input element in a form using CSS

In this tutorial, we will explore the process of embedding an icon within an input field on a form by leveraging CSS, accompanied by a range of illustrative examples.

To insert an icon within an input field, we utilize the <i> tag along with the <input> tag along with the font awesome library icon. This icon can be inserted by prepending the icon's name with the fa prefix.

Below are the steps to include the Font Awesome library in your webpage.

Example


https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

Here are different illustrations demonstrating how to insert an icon within an input field in a form utilizing CSS.

Example 1:

Example


<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
        <title> Icon inside an input element in a form using CSS </title>
        <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
        <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<link rel = "stylesheet"
		href =
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
* { box-sizing: border-box; }
body { 
	background-color: #333; 
	font-size: 1rem; 
	font-family: 'Lato';
	font-weight: bold;
}
input[type="text"] {
  width: 100%;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0px ;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}
h2 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 4vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s); 
}
input[type="text"]:focus {
  border-color: dodgerBlue;
  box-shadow: 0 0 8px 0 dodgerBlue;
}

.inputWithIcon input[type="text"] {
  padding-left: 40px;
}

.inputWithIcon {
  position: relative;
}

.inputWithIcon i {
  position: absolute;
  left: 10;
  top: 8px;
  padding: 9px 8px;
  color: #aaa;
  transition: 0.3s;
}

.inputWithIcon input[type="text"]:focus + i {
  color: dodgerBlue;
}

.inputWithIcon.inputIconBg i {
  background-color: #aaa;
  color: #fff;
  padding: 9px 4px;
  border-radius: 4px 0 0 4px;
}

.inputWithIcon.inputIconBg input[type="text"]:focus + i {
  color: #fff;
  background-color: dodgerBlue;
}

form {
		position: relative;
		width: 780px;
		margin: 2% auto;
		border: .5em solid lighten(deepskyblue, 30%);
		border: .5em solid lighten(deepskyblue, 30%);
		border: .5em solid lighten(deepskyblue, 30%);
		border: .5em solid lighten(deepskyblue, 30%);
		box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782, 0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5);
		background-image: radial-gradient( circle at left 30%, rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3) 80px, rgba(34, 34, 34, 0.5) 100px, rgba(51, 51, 51, 0.5) 160px, rgba(51, 51, 51, 0.5)), linear-gradient( 215deg, transparent, transparent 100px, #222 260px, #222 320px, transparent), radial-gradient( circle at right, #111, rgba(51, 51, 51, 1));
		background-color: #333;
}
form:before {
		box-sizing: border-box;
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		border: .5em solid lighten(deepskyblue, 30%);
		font-family: 'Permanent Marker', cursive;
		font-size: 2.2em;
		color: rgba(238, 238, 238, 0.7);
		text-align: center;
		 margin-bottom: 80px;
		padding: 20px;
}
label {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 1vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
  margin-bottom: 80px; 
}
.third {
  border-color: 2px white;
  color: #fff;
  transition: all 150ms ease-in-out;
}
.third:hover {
  box-shadow: 0 0 10px 0 #3498db inset, 0 0 10px 4px #3498db;
}
h3 {
text-align: center;
  font-size: 22px;
  font-weight: 700; color:#202020;
  text-transform: uppercase;
  word-spacing: 1px; 
  letter-spacing:2px;
   color: #fff;
  }
  .btn {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 2px solid white;
  border-radius: 0.6em;
  color: white;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}
    </style>
</head>
  
<body>
    <center>
        <form>
            <h2> Example </h2>
			<h3> Icon inside an input element in a form using CSS </h3>
            <div class = "inputWithIcon">
  <input type = "text" placeholder = "Your name">
  <i class = "fa fa-user fa-lg fa-fw" aria-hidden = "true"> </i>
</div>

<div class = "inputWithIcon">
  <input type = "text" placeholder = "Email">
  <i class = "fa fa-envelope fa-lg fa-fw" aria-hidden = "true"> </i>
</div>

<div class = "inputWithIcon">
  <input type = "text" placeholder = "Phone Number">
  <i class = "fa fa-phone fa-lg fa-fw" aria-hidden = "true"> </i>
</div>
<div class = "inputWithIcon">
<input type = "text" placeholder = "Password">
    <i class = "fa fa-key fa-lg fa-fw" aria-hidden = "true"> </i>               
    </div>
<div>
    <input type = "checkbox" id = "t-and-c2" name = "name" />
    <label for = "t-and-c2"> I accept the terms and conditions .</label>
  </div>
<button class = "btn third"> Submit </button>
        </form>
    </center>
</body>
  </html>

Explanation:

We have generated a simple form with icons embedded within input fields in the previous instance.

Output:

Following is the output of this example.

Example 2:

Example


<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
        <title> Icon inside an input element in a form using CSS </title>
        <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
        <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">

<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;	
	font-family: Raleway, sans-serif;
}
body {
  height: 100vh;
  margin: 0 auto;
  position: relative;
background: linear-gradient(to right, #99b5c1, #7e7bb9, #c788b1, #edaf3f);
}
.container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}
h2 {
  text-align: center;
  font-weight: normal;
  color: linear-gradient(55deg, #c788b1, #c788b1);
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 4vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
.hello {
  text-align: center;
  font-weight: bold;
  color:#6d54a4;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 1vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s); 
}
.sc {		
	background: linear-gradient(55deg, #c788b1, #c788b1);		
	position: relative;	
	height: 600px;
	width: 560px;	
	box-shadow: 0px 0px 24px #5C5696;
}
.screen__content {
	z-index: 1;
	position: relative;	
	height: 100%;
}
.sb {		
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);	
}
.sbh {
	transform: rotate(45deg);
	position: absolute;
}
.sbh1 {
	height: 520px;
	width: 520px;
	background: #FFF;	
	top: -50px;
	right: 120px;	
	border-radius: 0 72px 0 0;
}
.sbh2 {
	height: 220px;
	width: 220px;
	background: #6C63AC;	
	top: -172px;
	right: 0;	
	border-radius: 32px;
}
.sbh3 {
	height: 540px;
	width: 190px;
	background: linear-gradient(170deg, #6D54A4, #6A679E);
	top: -24px;
	right: 0;	
	border-radius: 32px;
}
.sbh4 {
	height: 400px;
	width: 400px;
	background: #7E7BB9;	
	top: 420px;
	right: 50px;	
	border-radius: 60px;
}
.login {
	width: 320px;
	padding: 30px;
	padding-top: 156px;
}
.login__field {
	padding: 20px 0px;	
	position: relative;	
}
.login__icon {
	position: absolute;
	top: 30px;
	color: #7875B5;
}
.login__input {
	border: none;
	border-bottom: 2px solid #D1D1D4;
	background: none;
	padding: 10px;
	padding-left: 24px;
	font-weight: 700;
	width: 75%;
	transition: .2s;
}
.login__input:active,
.login__input:focus,
.login__input:hover {
	outline: none;
	border-bottom-color: #6A679E;
}
.login__submit {
	background: #fff;
	font-size: 20px;
	margin-top: 30px;
	padding: 16px 20px;
	border-radius: 26px;
	border: 1px solid #D4D3E8;
	text-transform: uppercase;
	font-weight: 900;
	display: flex;
	align-items: center;
	color: #4C489D;
	box-shadow: 0px 2px 2px #5C5696;
	cursor: pointer;
	transition: .2s;
}
.login__submit:active {
	border-color: #6A679E;
	outline: none;
}
.login__submit:focus {
	border-color: #6A679E;
	outline: none;
}
.login__submit:hover {
	border-color: #6A679E;
	outline: none;
}
.button__icon {
	font-size: 24px;
	margin-left: 10px;
	color: #7875B5;
}
.social-login {	
	position: absolute;
	height: 240px;
	width: 160px;
	text-align: center;
	bottom: 0px;
	right: 0px;
	color: #fff;
}
.social-icons {
	display: flex;
	align-items: center;
	justify-content: center;
}
.sli {
	padding: 20px 10px;
	color: #fff;
	text-decoration: none;	
	text-shadow: 0px 0px 8px #7875B5;
}
.sli:hover {
	transform: scale(1.5);	
}
.icon-lock {
  width: 48px;
  height: 48px;
  position: relative;
  overflow: hidden;
  margin-left: 25px;
  margin-bottom: 25px;
}
.icon-lock .lock-top-1 {
  width: 40%;
  height: 40%;
  position: absolute;
  left: 50%;
  margin-left: -20%;
  top: 14%;
  background-color: #000;
  border-radius: 40%;
}
.icon-lock .lock-top-2 {
  width: 24%;
  height: 40%;
  position: absolute;
  left: 50%;
  margin-left: -12%;
  top: 22%;
  background-color: #151517;
  border-radius: 25%;
}
.icon-lock .lock-body {
  width: 60%;
  height: 48%;
  position: absolute;
  left: 50%;
  margin-left: -30%;
  bottom: 11%;
  background-color: #000;
  border-radius: 15%;
}
.icon-lock .lock-hole {
  width: 16%;
  height: 16%;
  position: absolute;
  left: 50%;
  margin-left: -8%;
  top: 51%;
  border-radius: 100%;
  background-color: #151517;
}
.icon-lock .lock-hole:after {
  content: " ";
  width: 43%;
  height: 78%;
  position: absolute;
  left: 50%;
  margin-left: -20%;
  top: 100%;
  background-color: inherit;
}
    </style>
</head>
  <body>
    <center>
        <form>
            <h2> Example </h2>
			<h3> Icon inside an input element in a Login form using CSS </h3>
 <div class = "container">
	<div class = "sc">
		<div class = "screen__content">
			<form class = "login">
			<div class = "icon-lock">
    <div class = "lock-top-1" style = "background-color: #E5E9EA"> </div>
    <div class = "lock-top-2"> </div>
    <div class = "lock-body" style = "background-color: #E5E9EA"> </div>
    <div class = "lock-hole"></div>
  </div>
				<div class = "login__field">
					<i class = "login__icon fas fa-user"> </i>
					<input type = "text" class = "login__input" placeholder = "User name / Email">
				</div>
				<div class = "login__field">
					<i class = "login__icon fas fa-lock"> </i>
					<input type = "password" class = "login__input" placeholder = "8+ (a, A, 1, #)">
				</div>
				<div class = "check">
            <input type = "checkbox" name = " " id = " ">
         <span class = "hello"> I'have read and agree with Terms and Conditions </span>
          </div>
				<button class = "button login__submit">
					<span class = "button__text"> Login </span>
					<i class = "button__icon fas fa-chevron-right"> </i>
				</button>				
			</form>
			<div class = "social-login">
				<h3> Or Signup by using </h3>
				<div class = "social-icons">
					<a href = "#" class = "sli fab fa-instagram"> </a>
					<a href = "#" class = "sli fab fa-facebook"> </a>
					<a href = "#" class = "sli fab fa-twitter"> </a>
				</div>
			</div>
		</div>
		<div class = "sb">
			<span class = "sbh sbh4"> </span>
			<span class = "sbh sbh3"> </span>		
			<span class = "sbh sbh2"> </span>
			<span class = "sbh sbh1"> </span>
		</div>		
	</div>
</div>
        </form>
    </center>
</body>
  </html>

Explanation:

In the previously mentioned example, a login form has been generated with an icon placed within input elements.

Output:

Following is the output of this example.

Example 1:

Example 2:

Input Required