Як додати іконку на вхід заднього фону в 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 конструкцію для іконки перед input-полем:

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

Як бачите, все досить просто. Приклад реалізації можна знайти в цьому уроці.