Adding icons inside form elements for bootstrap 3

index.html

<div class="form-group has-error">
	<label for="exampleInputEmail1">Email address</label>
	<div class="form-addon-left">
		<i class="glyphicon glyphicon-envelope form-control-feedback"></i>
		<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
	</div>
</div>

<div class="form-group">
	<label for="exampleInputEmail1">Email address</label>
	<div class="form-addon-right">
		<i class="glyphicon glyphicon-user form-control-feedback"></i>
		<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
	</div>
</div>

style.less

.form-group {
	.form-addon-left,.form-addon-right {
		position: relative;
		i {
			position: absolute;
			padding: 9px 11px;
			pointer-events: none;
		}
	}
	.form-addon-left {
		input {
			padding-left: 32px;
		}
	}
	.form-addon-right {
		input {
			padding-right: 32px;
		}
		i {
			right: 0px;
		}
	}
}