如何用另一个默认图标替换Bootstrap下拉菜单的下拉图标？

Question

有没有一种纯CSS的方法来替换Bootstrap的dropdown-toggle类中的插入符号图标？我希望它看起来像一个向下的箭头或逻辑或符号（∨），就像这样：，而不是原来的向下实心三角形插入符号。我已经找到了更改原始图标大小的答案：

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

但是我无法想出一个好的方法将它变成箭头。另一个问题参考这里，需要你在HTML中手动嵌入图像。

- Katie

Answer 1

您可以将默认值更改为以下内容：

.dropdown-toggle {
  font: 400 1.5rem/1.25 sans-serif;
  color: white;
  background: purple;
  padding: .5em 1em;
}

.dropdown-toggle::after {
  display: inline-block;
  width: .3em;
  height: .3em;
  margin: -.3em 0 0 .4em;
  vertical-align: middle;
  content: "";
  border: .3em solid;
  border-width: 0 .15em .15em 0;
  transform: rotateZ(45deg)
}

<span class="dropdown-toggle">CUSTOMERS</span>

- Kosh

Answer 2

如同在这个SO串所描述的那样，你可以移除当前图标并使用<span>或<i>标签来添加自定义/Font Awesome图标，就像这样：

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

<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 dropdown-toggle"  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>

或者您可以跳过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>

- AndrewL64

Answer 3

在你想要的添加图标中，需要放置在 span 标签内。

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>


<div class="container">                                          
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
      <span>+</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
</div>

- Xenio Gracias

Answer 4

只需使用FontAwesome。

body {
    font-family: Arial;
    font-size: 13px;
}



.dropdown-toggle:after {
   font-family: FontAwesome;
    content:"\f107";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
}

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

<div class="dropdown-toggle">CUSTOMERS</div>
</body>

</html>

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

- I_Al-thamary

---

啊，我不知道FontAwesome中有插入符号，谢谢分享。这是我第二喜欢的答案，Kosh的似乎更轻量级。 - Katie

Answer 5

如果有人仍需要关于将按钮更改为图像，然后使用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>

- Miftah Classifieds

Answer 6

我的五分钱意见 :) 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>

...

- Alexander