Is there any way to change Bootstrap CSS icon on mouse hover - html

Question

I have a Bootstrap dropdown in Angular. For dropdown menu I am using bootstrap css chevron-right icon. When user mouse hover, I want to change it to chevron-down icon.
This is my code
<style>
.dropdown:hover .dropdown-menu{
display: block;
}
.dropdown-menu{
margin-top: 0;
}
</style>
<div class="col-md-3 changeIcon">
<div class="nav-item dropdown">
<a href="#" data-toggle="dropdown">A-E
<i style="float: right;" class="bi bi-chevron-right"></i>
</a>
<div class="dropdown-menu">
Inbox
Sent
</div>
</div>
</div>
These css classes I tried but its not working
.changeIcon{
content: '\F285';
}
.changeIcon2:hover i::before{
content: "\uF356";
}
This is my UI, when user mouse hover, dropdown menus showing up but along with that I am not able to change right side icon
How can I do that ?

Answer 1

I have different solution for you.Here what i have try for you.
<div class="dropdown">
<button class="btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
A-E
<i class="bi bi-chevron-right icon"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Apply following css to it
.btn.show .icon::before {
transform: rotate(90deg);
transition: transform 0.5s;
}
And if you want to rotate icon on dropdown hover then replace above css with this one.
.dropdown:hover .icon::before {
transform: rotate(90deg);
transition: transform 0.5s;
}
Hope you like it :)