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

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">
            <a href="#" class="dropdown-item">Inbox</a>
            <a href="#" class="dropdown-item">Sent</a>
        </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 :)