Как добавить Glyphicon к input?

Question

[d2207]

Добавил в dootstrap 4.5.0 Glyphicon из 3-его бутстрапа. Хочу к инпуту добавить значки, для поиска, для логина и пароля например. Как это сделать? Этот ответне помог, т.к. вебшторм ругается на символ & . Пытался сделать как можно по проще:

<div className="form-group form-icon">
            <input className="form-control" id="name-user"/>
            <span className="glyphicon glyphicon-user input-icon" aria-hidden="true"/>
  </div>

.input-icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    pointer-events: none;
    top: 25px;
}
.form-icon {
    position: relative;
}
.form-icon input {
    padding-left: 42.5px;
}

В итоге иконка стоит криво

Comments

[WapSter]

Открой девтулзы и увидишь, что иконка меньше своего контейнера, по этому и криво.

[Dima Polos]

поменяйте, плиз, тег i на тег span, есть же нейтральный вариант)

[d2207]

Dima Polos, заменил

[d2207]

WapSter, Я этого не увидел, извините. В девтулзах ширина 38px я сделал такую же ширину для иконки(было 34 стало 38px) конечно это не помогло. В итоге тупо стилями сдвинул эту картинку туда куда нужно, но это не решение. Признаться я не понял как мне иконку сравнять с контейнером? max-content?

[WapSter]

d2207, в песочницу код. Отвечу что не так.

[d2207]

WapSter, Я кстати по вашему примеру делал, мне реакт ругается на 9 строчку символ &. Так что по-экспериментировать с ним не получилось. Поэтому начал делать свой эксперимент, только я не знаю как мне глификоны добавить в песочницу.

[WapSter]

d2207, на шестиренку нажми, там можно из cdn через link ввести в html или во вкладке css найти библиотеку.
Амперсанда это символ из scss в моем примере.

[d2207]

WapSter, Во вкладке css добавил библиотеку font-awesom