How to change Dropdown Icon on Bootstrap 5?
Last Updated :
17 Nov, 2023
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:
Approach 1: Using <i class=”fa fa-bug”></i>
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>
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<div class="container mt-3">
<h2 class="text-success">
GeeksforGeeks
</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:
Approach 2: Using content to set the variable
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>
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
</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">
GeeksforGeeks
</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:
Approach 3: Using <span> tag
Syntax:
<button type="button"
class="btn btn-success
dropdown-bs-toggle"
data-toggle="dropdown">
Select CS Subjects
<span class="fa fa-bug"></span>
</button>
Example: Below is the implementation of the above approach
Javascript
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<div class="container mt-3">
<h2 class="text-success">
GeeksforGeeks
</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
<span class="fa fa-bug"></span>
</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>
|
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
</head>
<body>
<center>
<div class="container mt-3">
<h2 class="text-success">
GeeksforGeeks
</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
<span class="fa fa-bug"></span>
</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:
Share your thoughts in the comments
Please Login to comment...