Comment changer l'icône déroulante dans Bootstrap 5 ?

Question

Je dois changer l'icône par défaut affichée dans le menu déroulant Bootstrap 5 en un caractère Font Awesome.

J'ai lu la documentation mais rien n'est utile. J'ai essayé de réécrire le CSS sans succès.

Comment changer l'icône déroulante dans Bootstrap 5 ?

Answer 1

D'accord, je suppose que vous avez déjà le lien rel="stylesheet" dans votre en-tête html. C'est la dernière version que vous devriez utiliser, mais j'ai essayé d'utiliser une ancienne version et cela a également fonctionné :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Ensuite, j'ai récupéré le menu déroulant Bootstrap 5 et ajouté une classe custom-dropdown :

<div class="dropdown custom-dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown button
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </div>

Créez ensuite le contenu suivant dans le fichier CSS :

.custom-dropdown .dropdown-toggle::after {
  content: '\f1b2'; /* Replace this with the desired Font Awesome icon code */
  font-family: 'Font Awesome 5 Free'; /* Specify the Font Awesome font-family */
  font-weight: 900; /* Adjust the font weight if needed */
  border-top: 0;
  vertical-align: middle;
}

Je n'ai jamais utilisé la police Awesome auparavant, mais sans utiliser border-top 0, je vois une barre blanche au-dessus de l'icône. C'est pourquoi j'utilise bordertop et Verticalalign pour aligner les icônes.

Ou vous pouvez simplement le faire en CSS :

.custom-dropdown .dropdown-toggle::after {
  display: none;
}

Ensuite, utilisez une icône comme celle-ci :

<div class="dropdown custom-dropdown">
                <button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown button
                    <i class="fa-solid fa-cube"></i>
                </button>
                <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                    <li><a className="dropdown-item" href="#">Action</a></li>
                    <li><a className="dropdown-item" href="#">Another action</a></li>
                    <li><a className="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </div>

Après avoir modifié l'icône, vérifiez si tout fonctionne comme vous le souhaitez, si c'est le cas, vous pouvez marquer votre réponse comme correcte :)