How to replace dropdown-toggle icon with another default icon in Bootstrap ?

Bootstrap provides the option of adding a dropdown to our websites. The default icon on the dropdown button is the ‘downward solid arrow’ logo. Even though it serves its purpose, most of the modern-day websites nowadays use Bootstrap. Therefore, the icon might look very generic to the visitor.

Program:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap dorpdown</title>
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
  
    <script src=
    </script>
  
    <script src=
    </script>
  
    <script src=
    </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>

chevron_right


Output:



However, it is possible to change the default Bootstrap icon to the icon of your choice. You can also make that icon toggleable, below steps will proceed to the solution.

  • Step 1: Go to an external icon website like Font Awesome. Embed its CDN link inside the <head> tag of the web-page.

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

  • Step 2: Change the CSS of the dropdown-toggle to display:none. This will disappear the solid dropdown logo from the button. However, ‘!important’ must be added as well in order to see the changes on the webpage.
    .dropdown-toggle::after {
        display: none !important;
    }
    
  • Step 3: After applying the CSS, copy the embed code of the icon that you want to display on the webpage from the external icon website and paste it inside the button tag. Like in this example, we are using the icon of ‘plus’ sign.
  • Step 4: The new icon will start getting displayed on the webpage.

Note: Below program code’s dropdown icon is also togglable by adding a single line of jQuery code with one click function on the icon.

Program: This example changing the default icon of Bootstrap dropdown icon.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap dorpdown</title>
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </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()">
                      
                    <!-- Chnaging 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>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.