Maison >interface Web >tutoriel CSS >Comment ajouter une icône à une entrée de recherche dans Bootstrap ?

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

Patricia Arquette
Patricia Arquetteoriginal
2024-11-16 12:27:03303parcourir

How to Add an Icon to a Search Input in 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn