В Bootstrap есть несколько способов размещения иконок на поле ввода, в зависимости от используемой версии и модулей. Рассмотрим несколько возможных подходов.
1. Использование CSS-классов Glyphicons (доступно только в Bootstrap версии 3).
В Bootstrap 3 можно использовать специальные CSS-классы Glyphicons для размещения иконок. Для начала, необходимо загрузить соответствующий шрифт, включив его в HTML-файл:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
Затем, можно использовать классы glyphicon и glyphicon-*, где символ звездочка (*) заменяется на название иконки. Например, для иконки поиска, можно использовать следующий код:
<div class="input-group">
<input type="text" class="form-control" placeholder="Поиск">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</div>
2. Использование CSS-классов из библиотеки Font Awesome.
В Bootstrap 4 по умолчанию используется библиотека Font Awesome для иконок. Для начала, необходимо загрузить ее шрифт и CSS-файл, аналогично предыдущему подходу:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
Затем, можно использовать классы fa и fa-* для размещения иконок. Например:
<div class="input-group">
<input type="text" class="form-control" placeholder="Поиск">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
</div>
3. Использование встроенных компонентов Bootstrap.
В Bootstrap 4 также предоставляются встроенные компоненты для размещения иконок на полях ввода. Например, можно использовать компонент input-group вместе с классом input-group-prepend и input-group-text. Пример кода:
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<input type="text" class="form-control" placeholder="Поиск">
</div>
В обоих подходах можно изменить размер иконки, добавив классы glyphicon-lg, glyphicon-md, fa-lg, fa-md и другие, соответственно. Также можно применять дополнительные стили CSS для дальнейшего изменения внешнего вида иконок, если это необходимо.
В зависимости от используемой версии Bootstrap и требований проекта, вы можете выбрать любой из этих подходов для размещения иконок на полях ввода.