Ändern des Dropdown-Symbols in Bootstrap 4

Bei Bootstrap 3 war das ziemlich einfach, Sie mussten nur die Spannweite ä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 darauf zu ändern und wie? Ich möchte eine von fontawesome hinzufügen.

Vielen Dank!

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>

http://codeply.com/go/xd2b75iUbM

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

Das standardmäßige Caretzeichen 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 du setzt .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 Standard-Caret in eine vertikale Ellipse von font-awesome wie folgt 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";
}

Einfach bewerben dropdown-toggle-ellipsis als zusätzliche Klasse zu Ihrem Toggle-Button.

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

Eine Lösung, die es ermöglicht, den HTML-Code so zu lassen, wie er ist, 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 Inhaltseigenschaft kann auf jeden verfügbaren Unicode-Wert gesetzt werden. Zum Beispiel für das Chevron-Down (https://fontawesome.com/icons/chevron-down?style=solid) es ist f078.

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

Der Schlüssel ist, 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;
}

Falls jemand anderes über eine Google-Suche ankommt, wie man das Dropdown-Symbol einfügt, hier ist ein netter Weg:

<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 vom Dropdown-Symbol eine kleine Polsterung hinzu, damit es einen schöneren Abstand hat.

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

Geben Sie einfach css border none ein. Der Pfeil besteht aus Rändern, wenn Sie die Ränder entfernen, gibt es keinen Pfeil. Nachdem Sie den Rahmen entfernt haben, können Sie Ihre eigenen Symbole hinzufügen.

.dropdown-toggle::after{
 border: none;
 content: '\icon';
}