Comment ajouter des icônes aux entrées de recherche dans Bootstrap 4 et 5 ?

Entrée de recherche avec Icon Bootstrap

Bootstrap ne prend plus en charge les glyphicons dans la version 4, les utilisateurs cherchant à ajouter des icônes aux entrées de recherche doivent trouver une alternative méthodes.

Bootstrap 5 Beta (mise à jour 2021)

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

Bootstrap 4 (solution originale)

Utilisation des Élément de groupe d'entrée Bootstrap 4 :

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

Bordure d'entrée intérieure :

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

Texte du groupe d'entrée sans arrière-plan :

<div class="input-group">
    <input class="form-control py-2 border-right-0 border" type="search" value="search">

Grille (ligne>col) sans espacement des gouttières :

<div class="row no-gutters">
    <div class="col">
        <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search">

Icône de pré-ajout :

<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="...">

Icônes de validation :

<div class="input-group is-invalid">
    <input class="form-control" type="search" value="">

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!