Как добавить иконку на задний фон input в Bootstrap

Рассмотрим добавления иконок в элемент input, на примере реализации формы обратного звонка.

Код формы заказа обратного звонка:

<form class="text-center">
	
<div class="h2">Заказать звонок</div>


	
<div class="form-group form-group-lg inner-addon">
		<i class="glyphicon glyphicon-user"></i>
		<input type="text" class="form-control" placeholder="Ваше имя">
	</div>

	
<div class="form-group form-group-lg inner-addon">
		<i class="glyphicon glyphicon-earphone"></i>
		<input type="text" class="form-control" placeholder="Ваш телефон">
	</div>

	
<div class="form-group">
		<button type="submit" class="btn btn-lg btn-primary">Заказать звонок</button>
	</div>

</form>

Форма имеет практически стандартную структуру, за исключением следующего:

Первое, добавили еще один класс к «form-group», а именно - «inner-addon»

Второе, добавили html конструкцию для иконки перед инпутом:

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

И самое главное что нам нужно, это создать дополнительные стили для класса «inner-addon»:

.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;
}

Как видите, все довольно просто. Пример реализации, можно найти в этом уроке.