如何将Bootstrap下拉切换图标替换为另一个默认图标？

hgb9j2n6 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(6)|浏览(202)

是否有一个纯CSS方法来替换Bootstrap的dropdown-toggle类中的脱字符图标？我希望它看起来像一个向下的箭头或逻辑或符号（&or;），如下所示：

而不是原来的向下实心三角形插入符号。我找到了替换原来图标大小的答案：

.dropdown-toggle::after {
    display: inline-block; /* Default */
    width: 0; /* Default */
    height: 0; /* Default */
    margin-left: .3em; /* Default */
    vertical-align: middle; /* Default */
    content: ""; /* Default */
    border-top: .3em solid; /* caret size */
    border-right: .3em solid transparent; /* caret size */
    border-left: .3em solid transparent; /* caret size */
}

但是我找不到一个好的方法来使它成为一个箭头。另一个问题引用here要求您手动将图像嵌入HTML。

twitter-bootstrap

来源：https://stackoverflow.com/questions/54396053/how-to-replace-bootstrap-dropdown-toggle-icon-with-another-default-icon

6条答案

按热度按时间

rsl1atfo1#

可以将默认值更改为以下值：
第一个

赞(0）回复(0）举报 2022-12-07

8cdiaqws2#

正如在另一个SO线程中所描述的，您可以删除当前图标，并使用<span>或<i>标记添加您自己的自定义/Font Awesome图标，如下所示：
第一个
或者，您可以跳过css部分，只删除dropdown-toggle类名并将图标添加到html中，如下所示：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="dropdown">
  <button type="button" class="btn btn-secondary" data-toggle="dropdown" style="background-color: #7c2a8b;">
    Customer
    <i class="fa fa-angle-down"></i>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">A</a>
    <a class="dropdown-item" href="#">B</a>
    <a class="dropdown-item" href="#">C</a>
  </div>
</div>

赞(0）回复(0）举报 2022-12-07

fsi0uk1n3#

只需使用FontAwesome
第一个

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<button style="font-size:24px">CUSTOMERS <i class="fa fa-angle-down"></i></button>

</body>
</html>

此处的代码：http://jsfiddle.net/06ngr298/

赞(0）回复(0）举报 2022-12-07

iecba09b4#

在span标签内添加您想要的图标。
第一个

赞(0）回复(0）举报 2022-12-07

shyt4zoc5#

我的5美分：）aria-labelledby，attr.aria-labelledby-在一个切换器和它的弹出窗口之间有正确的连接，[class.dropdown-toggle]="false"-隐藏标准图标，aria-haspopup="true"-在点击ngbDropdownToggle元素时保持弹出窗口工作。

<div class="ellipsis" ngbDropdown container="body" placement="bottom">
          <i
            class="fas fa-ellipsis-h"
            ngbDropdownToggle
            aria-haspopup="true"
            [class.dropdown-toggle]="false"
            id="{{ 'nodeAction_' + node.key }}"
          ></i>
          <div
            class="dropdown-menu"
            ngbDropdownMenu
            attr.aria-labelledby="{{ 'nodeAction_' + node.key }}"
          >
            <li
              class="dropdown-item pointer"
              ngbDropdownItem
              (click)="onEdit(node.origin.entity.tenant)"
            >
              {{ 'AbpIdentity::Edit' | abpLocalization }}
            </li>

...

赞(0）回复(0）举报 2022-12-07

62o28rlo6#

如果有人仍然需要关于只使用图像更改按钮，然后使用src属性更改图标帮助：

<div className="btn-group shadow-0 dropdown">
  <img className="dropdown-toggle my-auto" data-bs-toggle="dropdown" aria-expanded="false" src={icons.ic_setting}/>
  
  <ul className="dropdown-menu">
    <ListItemWithImage icon={icons.ic_setting} label={t('settings')}/>
    <li><hr className="dropdown-divider" /></li>
  </ul>
</div>

赞(0）回复(0）举报 2022-12-07

我来回答

如何将Bootstrap下拉切换图标替换为另一个默认图标？

6条答案

相关问题

热门标签

最新问答