How to usecontent to set the variable in Bootstrap
Using content to set the variable. As we know that default caret isn’t an icon, rather a border. Meaning, If you set .dropdown-toggle::after to have border:none!important, you can the use content to set the icon you want.
Syntax:
<style>
.dropdown-toggle::after {
border: none !important;
font: normal normal normal 14px/1 FontAwesome;
content: "\f188" !important;
}
</style>
Example: Below is the implementation of the above approach
HTML
<!DOCTYPE html><html><head> <!-- Load Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"> </script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><style> .dropdown-toggle::after { border: none !important; font: normal normal normal 14px/1 FontAwesome; content: "\f188" !important; }</style><body> <center> <div class="container mt-3"> <h2 class="text-success"> w3wiki </h2> <h2> How to change Dropdown Icon on Bootstrap 5? </h2> <div class="dropdown"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Select CS Subjects </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#"> Data Structure </a> <a class="dropdown-item" href="#"> Algorithm </a> <a class="dropdown-item" href="#"> Operating System </a> <a class="dropdown-item" href="#"> Computer Networks </a> </div> </div> </div> </center></body></html> |
Output:
How to change Dropdown Icon on Bootstrap 5?
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not hovering this is an intentional design decision. In this article, we will learn How to change the Dropdown Icon on Bootstrap 5.
The following approaches are used to change Dropdowns:
Table of Content
- Using i tag
- Using content to set the variable
- Using span tag