css 在 Bootstrap 上更改下拉图标

kd3sttzy  于 2023-05-23  发布在  Bootstrap
关注(0)|答案(8)|浏览(268)

在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添加一个。

zpqajqem

zpqajqem1#

    • Bootstrap 5(2023年更新)**

在Bootstrap 5中,将下拉式插入符号更改为图标仍然以相同的方式工作。不要忘记将data-toggle更改为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(原始答案)**

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

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

https://codeply.com/p/BV8WjfEPzb

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

xienkqul

xienkqul2#

默认的插入符号不是图标,而是具有以下属性的边框:

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

使用此方法,您还可以在下拉列表可见时更改FontAwesome图标,这要归功于它添加的.show类:

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

dnph8jn43#

我做了一些类似于公认答案的事情,将默认的插入符号从font-awesome改为垂直省略号,如下所示:

.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)现在是在样式表中定义的,而不是在标记中定义的。当然,这是否是一个优点取决于你的情况。

yzxexxkh

yzxexxkh4#

一个解决方案,允许保持HTML不变,只需添加一个CSS规则:

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

这将与Font Awesome 5一起使用。content属性可以设置为任何可用的Unicode值。例如,对于chevron-down(https://fontawesome.com/icons/chevron-down?style=solid),它是f078。

5vf7fwbs

5vf7fwbs5#

如果其他人通过谷歌搜索来了解如何插入下拉图标,这里有一个不错的方法:

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

它使用了awesome 5字体,pl-1在下拉图标的左边添加了一点填充,这样它的间距就更好了。
结果是一个与GitHub上的图标非常相似的图标:

xxb16uws

xxb16uws6#

使用其他答案中的建议,我在应用程序的主CSS文件中添加了下拉切换规则。
关键是Bootstrap在隐藏内容时使用“下拉切换”将“折叠”类添加到项目中,并在显示内容时删除该类。

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

e5nqia277#

在CSS边框中输入none。箭头是由边框组成的,如果你去掉边框,就没有箭头了。移除边框后,您可以添加自己的图标。

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

zyfwsgd68#

对于那些不使用font-awesome的人,你可以简单地使用url() CSS函数,并将SVG代码直接放入CSS中:

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

您可以从font awesome下载任何您想要的SVG:https://fontawesome.com/search?s=solid

相关问题