web-dev-qa-db-ja.com

Bootstrap 4のドロップダウンアイコンの変更

Bootstrap 3ではこれは非常に簡単でした。スパンを変更し、代わりに必要なアイコンを追加する必要がありました。しかし、Bootstrap 4.それとも、何かが足りないのでしょうか？

とにかく、基本的なコードは次のとおりです。

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

これのドロップダウンアイコンを変更することが可能かどうか、そしてどのように誰か教えてもらえますか？ fontawesomeから追加したいです。

ありがとうございました！

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4
12
Retros

このようにキャレットアイコンを非表示にする必要があります。

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

次に、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

[〜＃〜]または[〜＃〜]、dropdown-toggle唯一の目的であるため、ボタンのクラスはキャレットアイコンを表示しているようです。

35
Zim

私は受け入れられた答えに似た何かをして、デフォルトのキャレットを次のようなフォントから垂直の省略記号に変更しました：

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

dropdown-toggle-Ellipsisトグルボタンの追加クラスとして。

このソリューションとの主な違いは、実際のアイコン（\f142ここ）は、マークアップではなくスタイルシートで定義されるようになりました。それがプラスかどうかは、もちろんあなたの状況に依存します。

4
Jeroen

デフォルトのキャレットはアイコンではなく、これらのプロパティの境界線です。

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

したがって、.dropdown-toggle::after 持つ border:none!important、contentを使用して、必要なアイコンを設定できます。

私が使用するコードはこれです：

.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 */

このメソッドでは、追加する.showクラスのおかげで、ドロップダウンが表示されるときにFontAwesomeアイコンを変更することもできます。

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

HTMLをそのまま保持し、1つのCSSルールを追加するだけのソリューション：

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

これはFont Awesome 5で機能します。コンテンツプロパティは、利用可能な任意のUnicode値に設定できます。たとえば、シェブロンダウン（ https://fontawesome.com/icons/chevron-down?style=solid ）の場合、f078です。

0
Martin

他の回答の提案を使用して、ドロップダウン切り替え用のルールをアプリのメインCSSファイルに追加しました。

重要なのは、Bootstrap=は、コンテンツが非表示のときに「折りたたみ」クラスを「dropdown-toggle」で項目に追加し、コンテンツが表示されるときにクラスを削除するということです。

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