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

Bootstrap提供了为我们的网站添加下拉按钮的选项。下拉按钮的默认图标是 “向下的实心箭头 “标志。尽管它有其作用，但现在大多数的现代网站都使用Bootstrap。因此，这个图标对访问者来说可能看起来很普通。
代码:

<!DOCTYPE html>
<html>
 
<head>
    <title>Bootstrap dorpdown</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
 
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
 
    <style>
        .container{
            margin:20px;
        }
        h2{
            color:green;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h2>GeeksforGeeks</h2>
        <p>A Computer Science Portal for Geeks</p>
        <div class="dropdown">
            <button type="button"
                    class="btn btn-success dropdown-toggle"
                    data-toggle="dropdown">
                Dropdown
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Option A</a>
                <a class="dropdown-item" href="#">Option B</a>
                <a class="dropdown-item" href="#">Option C</a>
                <a class="dropdown-item" href="#">Option D</a>
            </div>
        </div>
    </div>
</body>
 
</html>

输出:

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

然而，可以将默认的Bootstrap图标改为你选择的图标。你也可以使该图标可切换，下面的步骤将进行解决。

第1步：进入一个外部图标网站，如Font Awesome。在网页的<head>标签内嵌入其CDN链接。

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

第2步：改变下拉菜单的CSS为display:none。这将使按钮上的实体下拉标志消失。然而，’！重要’也必须被添加，以便在网页上看到这些变化。

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

第3步：应用CSS后，从外部图标网站复制你想在网页上显示的图标的嵌入代码，并将其粘贴在按钮标签内。就像在这个例子中，我们使用的是 “加号 “的图标。
第4步：新的图标将开始在网页上显示。

注意：下面程序代码的下拉图标也是可以通过在图标上添加一行jQuery代码的单击功能来切换的。
程序：这个例子改变了Bootstrap下拉图标的默认图标。

<!DOCTYPE html>
<html>
 
<head>
    <title>Bootstrap dorpdown</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
    <style>
        .container{
            margin:20px;
        }
        h2{
            color:green;
        }
        .dropdown-toggle::after {
            display: none !important;
        }
        .fa {
            margin:2px;
            color:white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>GeeksforGeeks</h2>
        <p>A Computer Science Portal for Geeks</p>
        <div class="dropdown">
             
            <!-- Dropdown button -->
            <button type="button"
                    class="btn btn-success dropdown-toggle"
                     
                    data-toggle="dropdown">
                Dropdown
                <a href="javascript:void(0);"
                   class="icon"
                   onclick="geeksforgeeks()">
                     
                    <!-- Changing the default icon with toggle-->
                    <i onclick="myFunction(this)"
                       class="fa fa-plus-circle"></i>
                </a>
            </button>
             
            <!-- Dropdown options -->
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Option A</a>
                <a class="dropdown-item" href="#">Option B</a>
                <a class="dropdown-item" href="#">Option C</a>
                <a class="dropdown-item" href="#">Option D</a>
            </div>
        </div>
    </div>
    <script>
         
        // Function to toggle the plus menu into minus
        function myFunction(x) {
            x.classList.toggle("fa-minus-circle");
        }
    </script>
</body>
 
</html>

输出:

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