在 Bootstrap 4 上更改下拉图标 [英] Changing Dropdown Icon on Bootstrap 4

问题描述

在 Bootstrap 3 上，这非常简单，您只需更改跨度并添加您想要的任何图标即可.但 Bootstrap 4 似乎并非如此.或者我可能遗漏了什么?

无论如何，这是它的基本代码:

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">下拉按钮<div class="下拉菜单" aria-labelledby="dropdownMenuButton"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><a class="dropdown-item" href="#">这里还有别的东西</a>

有人可以告诉我是否可以更改下拉图标以及如何更改?我想从 fontawesome 添加一个.

谢谢！

解决方案

你必须像这样隐藏插入符号图标..

.dropdown-toggle::after {显示:无；}

然后添加 fontawesome 图标..

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

http://codeply.com/go/xd2b75iUbM

OR，只需从按钮中删除 dropdown-toggle 类，因为它的唯一目的似乎是显示插入符号图标.

On Bootstrap 3 this was pretty easy, you just had to change span and add whatever icon you wanted instead. But that doesn't seem the case with Bootstrap 4. Or maybe I'm missing something?

Anyway, here's the basic code for it:

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

Can someone please tell me if it's possible to change the dropdown icon on this and how? I want to add one from fontawesome.

Thank you!

解决方案

You have to hide the caret icon like this..

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

Then add the 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://codeply.com/go/xd2b75iUbM

OR, just remove the dropdown-toggle class from the button as it's only purpose seems to be showing the caret icon.

这篇关于在 Bootstrap 4 上更改下拉图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！