Open In App

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

Last Updated : 20 Feb, 2023
Comments
Improve
Suggest changes
Like Article
Like
Report

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: 
 

html 
<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap dropdown</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>

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

html 
<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap dropdown</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>

Output: 
 


 


S

sanchit496
Improve
Article Tags :

Explore

Lightbox