Bootstrap 4 및 5에서 검색 입력에 아이콘을 추가하는 방법은 무엇입니까?

아이콘 부트스트랩을 사용한 검색 입력

Bootstrap은 버전 4에서 더 이상 Glyphicon을 지원하지 않으므로 검색 입력에 아이콘을 추가하려는 사용자는 대안을 찾아야 합니다.

Bootstrap 5 베타(2021 업데이트)

<div class="input-group">
    <input class="form-control border-end-0 border rounded-pill" type="text" value="search">

Bootstrap 4(원본 솔루션)

사용 부트스트랩 4 입력 그룹 요소:

<div class="input-group col-md-4">
    <input class="form-control py-2" type="search" value="search">

입력 테두리 내부:

<div class="input-group col-md-4">
    <input class="form-control py-2 border-right-0 border" type="search" value="search">

배경이 없는 입력 그룹 텍스트:

<div class="input-group">
    <input class="form-control py-2 border-right-0 border" type="search" value="search">

여백 간격이 없는 그리드(행>열):

<div class="row no-gutters">
    <div class="col">
        <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search">

아이콘 앞에 추가:

<div class="input-group">
    <span class="input-group-prepend">
        <div class="input-group-text bg-transparent border-right-0">
            <i class="fa fa-search"></i>
        </div>
    </span>
    <input class="form-control py-2 border-left-0 border" type="search" value="...">

검증 아이콘:

<div class="input-group is-invalid">
    <input class="form-control" type="search" value="">

위 내용은 Bootstrap 4 및 5에서 검색 입력에 아이콘을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!