How to use <i class=”fa fa-bug”></i> in Bootstrap
Using <i class=”fa fa-bug”></i> Also change data-toggle to data-bs-toggle
Syntax:
<button type="button"
class="btn btn-success
dropdown-bs-toggle"
data-toggle="dropdown">
Select CS Subjects
<i class="fa fa-bug"></i>
</button>
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><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-bs-toggle" data-toggle="dropdown"> Select CS Subjects <i class="fa fa-bug"></i> </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