Maison >interface Web >tutoriel CSS >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 :
<div>
<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!