How to add an icon to the input background in Bootstrap

Let’s look at how to add icons to an input element, using the example of implementing a callback request form.

Callback request form code:

<form class="text-center">

<div class="h2">Request a call</div>



<div class="form-group form-group-lg inner-addon"> 
<i class="glyphicon glyphicon-user"></i> 
<input type="text" class="form-control" placeholder="Your name"> 
</div>


<div class="form-group form-group-lg inner-addon"> 
<i class="glyphicon glyphicon-earphone"></i> 
<input type="text" class="form-control" placeholder="Your phone"> 
</div>


<div class="form-group"> 
<button type="submit" class="btn btn-lg btn-primary">Request a call</button> 
</div>

</form>

The form has a mostly standard structure, with the following exceptions:

First, we added an additional class to the “form-group” — specifically, “inner-addon”.

Second, we inserted an HTML structure for the icon before the input:

<i class="glyphicon glyphicon-user"></i>

And most importantly, we need to create additional styles for the “inner-addon” class:

.inner-addon {
	position: relative;
}

.inner-addon .glyphicon {
	position: absolute;
	left: 0px;
	
	color: #6F727A;
	padding: 10px;
	pointer-events: none;
}

.inner-addon .form-control {
	padding-left: 35px;
}

.form-group-lg.inner-addon .glyphicon{
	font-size: 20px;
}

As you can see, everything is quite simple. An example implementation can be found in this lesson.