ブートストラップの検索入力にアイコンを追加するにはどうすればよいですか?

Bootstrap を使用したアイコンでの入力の検索

Bootstrap 4 では、アイコンにグリフィコンを使用できなくなりました。代わりに、アイコンを背景として設定するか、カスタムの位置で Font Awesome アイコンを使用することができます。

背景画像:

.form-control {
  background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
  background-position: right center 5px;
}

ただし、この方法では、常に確実に動作するとは限りません。

カスタムの Font Awesome Icon配置:

.input-group {
  position: relative;
}

.fa-search {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

Bootstrap 5:

Bootstrap 5 では、入力グループ コンポーネントを使用して、検索入力にアイコンを簡単に追加できます。 .

<div>

代替アプローチ:

• 境界線を使用した入力グループ ユーティリティ: 境界線クラスを使用して、入力とアイコンの周囲に境界線を作成します。

<div>

• 入力グループとテキスト:

<div>

以上がブートストラップの検索入力にアイコンを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。