web-dev-qa-db-fra.com

Changer l’icône de la liste déroulante sur Bootstrap 4

Sur Bootstrap 3, c'était assez facile, il suffisait de changer de durée et d'ajouter l'icône de votre choix. Mais cela ne semble pas être le cas avec Bootstrap 4. Ou peut-être que je manque quelque chose?

Quoi qu'il en soit, voici le code de base pour cela:

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

Quelqu'un peut-il me dire s'il est possible de changer l'icône de la liste déroulante et comment? Je veux en ajouter un de Fontawesome.

Je vous remercie!

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4
8
Retros

Vous devez masquer l'icône du signe comme ceci ..

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

Ajoutez ensuite l'icône Fontawesome.

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
    <i class="fa fa-heart"></i>
</button>

http://www.codeply.com/go/xd2b75iUbM

OU, supprimez simplement la classe dropdown-toggle du bouton car son seul but semble afficher l'icône du curseur.

19
Zim

J'ai fait quelque chose de similaire à la réponse acceptée, en changeant le curseur par défaut en un Ellipsis vertical de font-awesome comme ceci:

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

.dropdown-toggle-Ellipsis::before {
  display: inline-block;
  padding: 0.5rem;
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f142";
}

Appliquez simplement dropdown-toggle-Ellipsis en tant que classe supplémentaire à votre bouton bascule.

La principale différence avec cette solution est que l'icône actuelle (\f142 ici) est maintenant définie dans vos feuilles de style et non dans votre balisage. Que cela soit un avantage ou non dépend de votre situation.

3
Jeroen

En utilisant les suggestions des autres réponses, j'ai ajouté des règles dans le fichier CSS principal de mon application pour le menu déroulant.

La clé est que Bootstrap ajoute la classe "réduite" aux éléments avec "dropdown-toggle" lorsque le contenu est masqué et supprime la classe lorsque le contenu est affiché.

/* Align Bootstrap default Dropdown icon closer to vertical center of collapsed icon. */
.dropdown-toggle::after {
    vertical-align: 0.15em;
}

/* Make Dropdown icon point right when collapsed, with Browser default vertical alignment. */
.collapsed.dropdown-toggle::after {
    border-top: 0.3em solid transparent;
    border-left: 0.3em solid;
    border-bottom: 0.3em solid transparent;
    border-right: 0;
    vertical-align: unset;
}
0
Zarepheth