Comment ajouter une icône à une entrée de recherche dans Bootstrap ?

Rechercher une entrée avec une icône à l'aide de Bootstrap

Dans Bootstrap 4, vous ne pouvez plus utiliser des glyphicons pour les icônes. Au lieu de cela, vous pouvez soit définir l'icône comme arrière-plan, soit utiliser une icône Font Awesome avec un positionnement personnalisé.

Image d'arrière-plan :

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

Cette méthode, cependant, peut ne pas toujours fonctionner de manière fiable.

Icône géniale de police avec personnalisation Positionnement :

.input-group {
  position: relative;
}

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

Bootstrap 5 :

Dans Bootstrap 5, vous pouvez utiliser le composant input-group pour ajouter facilement une icône à une entrée de recherche .

<div>

Alternative Approches :

• Groupe d'entrée avec Border Utils : Utilisez les classes de bordure pour créer une bordure autour de l'entrée et de l'icône.

<div>

• Groupe d'entrée avec Texte :

<div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!