Ändern des Dropdown-Symbols auf Bootstrap

Bei Bootstrap 3 war das ziemlich einfach, man musste nur span ändern und stattdessen das gewünschte Symbol hinzufügen. Aber das scheint bei Bootstrap 4 nicht der Fall zu sein. Oder übersehe ich vielleicht etwas?

Wie auch immer, hier ist der grundlegende Code dafür:

<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>

Kann mir bitte jemand sagen, ob es möglich ist, das Dropdown-Symbol hier zu ändern und wie? Ich möchte eines von Fontawesome hinzufügen.

Bootstrap 5 (Update 2023)

Das Ändern des Dropdown-Einfügezeichens in ein Symbol funktioniert in Bootstrap 5 immer noch auf die gleiche Weise. Vergessen Sie nicht, das zu ändern data-toggle Zu data-bs-toggle:

<div class="dropdown">
  <button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
    <i class="fa fa-heart"></i>
  </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>

https://codeply.com/p/oG5SpGwWfL

Bootstrap 4 (ursprüngliche Antwort)

Sie müssen das Caret-Symbol so ausblenden.

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

Fügen Sie dann das Fontawesome-Symbol hinzu.

<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>

https://codeply.com/p/BV8WjfEPzb

ODERentfernen Sie einfach die dropdown-toggle Klasse von der Schaltfläche, da ihr einziger Zweck darin zu bestehen scheint, das Caret-Symbol anzuzeigen.

Das Standard-Caret ist kein Symbol, sondern ein Rahmen mit diesen Eigenschaften:

border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;

Also, wenn Sie einstellen .dropdown-toggle::after haben border:none!importantkönnen Sie die Verwendung content um das gewünschte Symbol festzulegen.

Der Code, den ich verwende, ist dieser:

.dropdown-toggle::after {
  border: none!important;
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f107"!important; /* the desired FontAwesome icon */
  vertical-align: 0; /* to center vertically */
}

Mit dieser Methode können Sie dank der hinzugefügten .show-Klasse auch das FontAwesome-Symbol ändern, wenn das Dropdown-Menü sichtbar ist:

li.menu-item.show a.dropdown-toggle.::after {
  content: "\f106"!important /* the different icon */
}

Ich habe etwas Ähnliches wie die akzeptierte Antwort getan und das Standardcursor von „font-awesome“ wie folgt in vertikale Auslassungspunkte geändert:

.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";
}

Bewerben Sie sich einfach dropdown-toggle-ellipsis als zusätzliche Klasse zu Ihrer Umschalttaste.

Der Hauptunterschied bei dieser Lösung besteht darin, dass das eigentliche Symbol (\f142 hier) ist jetzt in Ihren Stylesheets definiert, nicht in Ihrem Markup. Ob das ein Pluspunkt ist, hängt natürlich von Ihrer Situation ab.

Eine Lösung, die es ermöglicht, den HTML-Code unverändert zu lassen und einfach eine CSS-Regel hinzuzufügen:

.dropdown-toggle::after {
  border: none;
  font: normal normal normal 12px/1 'Font Awesome 5 Free';
  content: "\f078";
  vertical-align: 0;
}

Dies funktioniert mit Font Awesome 5. Die Content-Eigenschaft kann auf alle verfügbaren Unicode-Werte gesetzt werden. Zum Beispiel für den Chevron-Down (https://fontawesome.com/icons/chevron-down?style=solid) es ist f078.

Falls jemand anderes über eine Google-Suche nach dem Einfügen des Dropdown-Symbols gelangt, ist hier eine gute Möglichkeit:

<span style="color:black;" class="fa fa-caret-down pl-1"></span>

Dies verwendet die Schriftart Awesome 5 und die pl-1 Fügt links neben dem Dropdown-Symbol etwas Abstand hinzu, damit es einen schöneren Abstand hat.

Das Ergebnis ist ein Symbol, das dem auf GitHub sehr ähnlich ist:

Mithilfe der Vorschläge in den anderen Antworten habe ich in der Haupt-CSS-Datei meiner App Regeln für den Dropdown-Umschalter hinzugefügt.

Der Schlüssel liegt darin, dass Bootstrap die Klasse „collapsed“ zu Elementen mit „dropdown-toggle“ hinzufügt, wenn der Inhalt ausgeblendet ist, und die Klasse entfernt, wenn der Inhalt angezeigt wird.

/* 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;
}

Für diejenigen, die Font-awesome NICHT verwenden, können Sie einfach die verwenden url() CSS-Funktion und fügen Sie den SVG-Code direkt in das CSS ein:

.dropdown-toggle::after{
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>');
  border: none;
  width: 10px;
  height: auto;
  margin-left: 0.4rem;
  vertical-align: middle;
}

Sie können jedes gewünschte SVG aus der Schriftart awesome herunterladen: https://fontawesome.com/search?s=solid