Ändern Dropdown-Icon auf Bootstrap 4

Auf Bootstrap 3 war dies ziemlich einfach, man musste nur ändern, span an und fügen Sie, was Symbol, das Sie wollten, statt. Aber das scheint nicht der Fall mit Bootstrap 4. Oder vielleicht bin ich etwas fehlt?

Ohnehin, hier ist der basic-code:

<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, ändern Sie das dropdown-icon auf das und wie? Ich möchte eins hinzufügen aus fontawesome.

Danke!

InformationsquelleAutor Retros | 2017-04-05

23

Verstecken Sie das caret-Symbol wie dieses..
```
.dropdown-toggle::after {
    display: none;
}
```
Dann fügen Sie die fontawesome-icon..
```
<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

ODER, entfernen Sie einfach die dropdown-toggle Klasse von der Taste, wie es der einzige Zweck zu sein scheint, zeigt das caret-Symbol.

Das ist es! Danke, ZimSystem.
display:none ist eine bessere Lösung, da Sie, wenn Sie entfernen, dropdown-toggle-Klasse dann geschachtelte dropdowns (dropdown Menü innerhalb dropdown) funktioniert nicht.
Arbeiten !! Dank Zim !!

InformationsquelleAutor Zim
3

Habe ich etwas ähnliches gemacht, um die akzeptierte Antwort, die änderung der Standard-Cursor, eine vertikale Ellipse von font-awesome wie dieses:
```
.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";
}
```
Nur für dropdown-toggle-ellipsis als eine zusätzliche Klasse zu Ihrem toggle-button.

Der wesentliche Unterschied bei dieser Lösung ist, dass das eigentliche Symbol (\f142 hier) ist nun definiert in Ihren stylesheets, die nicht in Ihrem markup. Ob das plus kommt auf deine situation natürlich.

InformationsquelleAutor Jeroen

Verwenden Sie die Vorschläge in den anderen Antworten, ich habe Regeln in meinem app-die Haupt-CSS-Datei für das in der dropdown-toggle.

Der Schlüssel ist, dass Bootstrap fügt die "zusammengebrochen" - Klasse, um Elemente mit "dropdown-toggle", wenn der Inhalt ist versteckt und entfernt die Klasse, 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;
}

InformationsquelleAutor Zarepheth

Den Standard-Cursor ist nicht ein Symbol, sondern eine Grenze mit diesen Eigenschaften:

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

So, wenn Sie .dropdown-toggle::after zu haben border:none!important können Sie die Verwendung content setzen Sie auf das gewünschte Symbol.

Den code, den ich benutze, ist dieses:

.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 auch die FontAwesome Symbol, wenn das dropdown ist sichtbar, Dank der .zeigen Sie der Klasse er fügt hinzu:

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

InformationsquelleAutor chris45

0

Einer Lösung, die es ermöglicht zu halten, das HTML, wie es ist und einfach das hinzufügen einer CSS-Regel:
```
.dropdown-toggle::after {
  border: none;
  font: normal normal normal 12px/1 'Font Awesome 5 Free';
  content: "\f078";
  vertical-align: 0;
}
```
Diese arbeiten mit Font Awesome-5. Die content-Eigenschaft kann eingestellt werden, um alle verfügbaren Unicode-Werte. Zum Beispiel für die chevron-down (https://fontawesome.com/icons/chevron-down?style=solid) es ist f078.

InformationsquelleAutor Martin

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.