Bootstrap 4 および 5 の検索入力にアイコンを追加するにはどうすればよいですか?

アイコン ブートストラップによる検索入力

ブートストラップはバージョン 4 でグリフィコンをサポートしなくなったため、検索入力にアイコンを追加しようとするユーザーは代替手段を見つける必要がありますメソッド。

ブートストラップ 5 ベータ版(2021 年更新)

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

Bootstrap 4 (元のソリューション)

Bootstrap 4 入力グループ要素の使用:

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

内部入力border:

<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 中国語 Web サイトの他の関連記事を参照してください。