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

时间：2019-01-28 05:33:43

标签： html css html5 css3 bootstrap-4

在Bootstrap的dropdown-toggle类中是否有纯CSS方法替换插入符号？我希望它看起来像一个向下的箭头或逻辑或符号（∨），如下所示：

dropdown with arrow

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

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

5 个答案:

答案 0 :(得分：2)

如其他SO thread所述，您可以删除当前图标并使用<span>或<i>标签添加您自己的自定义/字体真棒图标，如下所示：< / p> 

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

答案 1 :(得分：2)

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

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

答案 2 :(得分：1)

在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 :(得分：1)

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

答案 4 :(得分：0)

我的5美分:) #include <iostream> using namespace std; void vendingMachine() { cout << "1. Popcorn: $2" << endl; cout << "2. Coconut Clusters: $3" << endl; cout << "3. Granola Bar: $2.50" << endl; cout << "4. Trail Mix: $1.50" << endl; cout << "5. Chocolate: $1" << endl; cout << "Press 0 to checkout" << endl; } int processSelection() { cout << "Enter your selection: " << flush; int input; cin >> input; return input; } int shoppingCart() { int selection = processSelection(); float cost; switch (selection) { case 1: cout << "You added Popcorn to your cart." << endl; cost = 2; break; case 2: cout << "You added Coconut Clusters to your cart." << endl; cost = 3; break; case 3: cout << "You added Granola Bar to your cart." << endl; cost = 2.50; break; case 4: cout << "You added Trail Mix to your cart." << endl; cost = 1.50; break; case 5: cout << "You added Chocolate to your cart." << endl; cost = 1; break; case 6: cout << "Checkout" << endl; break; default: cout << "Please select an item from the menu" << endl; } cout << "Continue shopping (y/n): " << flush; string reply; cin >> reply; return reply; } int main() { cout << "Vending Machine" << endl; cout << "----Items------" << endl; vendingMachine(); int reply = shoppingCart(); float cost; while(reply == "y") { processSelection(); shoppingCart(); } cout << "Proceding to checkout..." << endl; cout << "Pay amount: $" << flush; float money; cin >> money; if (money > cost) { float change = money-cost; cout << "Thank you! You have $" << change << " change." << endl; } if (money == cost) { cout << "Thank you! Have a nice day!." << endl; } if (money < cost) { float amountOwed = cost-money; cout << "Please insert another $" << amountOwed << endl; cout << "Enter amount: " << flush; float payment; cin >> payment; if (payment > amountOwed) { float change2 = payment-cost; cout << "Thank you! You have $" << change2 << " change." << endl; } if (payment == amountOwed) { cout << "Thank you! Have a nice day!." << endl; } if (payment < amountOwed) { cout << "Sorry, you did not enter enough money. Your cart has emptied." << endl; } } return 0; } ，aria-labelledby-在切换器及其弹出窗口之间建立正确的连接，attr.aria-labelledby-隐藏标准图标，[class.dropdown-toggle]="false"-保持单击aria-haspopup="true"元素时弹出窗口有效。并以您想要的方式装饰此元素。

ngbDropdownToggle

...

相关问题
最新问题