Используйте родительский .input-icon
div. Необязательно добавьте .input-icon-right
.
Выровняйте значок по вертикали с помощью transform
и top
и установите pointer-events
на none
так, чтобы щелчки фокусировались на входе. При необходимости отрегулируйте padding
и width
:
.input-icon {
position: relative;
}
.input-icon > i {
position: absolute;
display: block;
transform: translate(0, -50%);
top: 50%;
pointer-events: none;
width: 25px;
text-align: center;
font-style: normal;
}
.input-icon > input {
padding-left: 25px;
padding-right: 0;
}
.input-icon-right > i {
right: 0;
}
.input-icon-right > input {
padding-left: 0;
padding-right: 25px;
text-align: right;
}
В отличие от принятого ответа, это сохранит подсветку подтверждения ввода, например, красную рамку, если есть ошибка.
Пример использования JSFiddle с помощью Bootstrap и шрифта Awesome