如何用另一个默认图标替换 Bootstrap 下拉切换图标？答案

【问题标题】：How to replace Bootstrap dropdown-toggle icon with another default icon?如何用另一个默认图标替换 Bootstrap 下拉切换图标？
【发布时间】：2019-06-21 02:31:18
【问题描述】：

是否有纯 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。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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

...

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

只需使用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/

【讨论】：

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

【解决方案4】：

如其他SO thread 中所述，您可以删除当前图标并使用<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>

【讨论】：

【解决方案5】：

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

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

&lt;span class="dropdown-toggle"&gt;CUSTOMERS&lt;/span&gt;

【讨论】：