Trong Bootstrap 5, để thay đổi biểu tượng trong Navbar, bạn có thể sử dụng các lớp CSS đã được xác định sẵn. Dưới đây là một đoạn mô tả cách thay đổi biểu tượng click hiển thị collapse sử dụng font anwesome trong Navbar của Bootstrap 5:
Đoạn code navbar như sau :

...................
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <div class="container-fluid">
            <div class="navbar-brand">
                <a href="#">
                    <img src="https://placehold.co/[email protected]"/>
                </a>
            </div>
            <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu">
                <span class="navbar-icon fa fa-bars"></span>
            </button>
            <div class="collapse navbar-collapse" id="menu">
                <ul class="navbar-nav me-auto">
                    <li><a class="nav-item me-2" href="#">1</a></li>
                    <li><a class="nav-item" href="#">2</a></li>
                </ul>
                <form class="d-flex mb-0">
                    <input type="text" class="me-2" id="q" name="q"/>

                </form>
                <button type="button" name="submit" class="search">Gui</button>
            </div>
        </div>
    </nav>
...................

Phần jquery

<script>
    $(document).ready(function () {
        $('.navbar-toggler').click(function () {
            let icon_status = $(this).find('.navbar-icon');
            if (icon_status.hasClass('fa-bars')) {
                icon_status.removeClass('fa-bars').addClass('fa-solid fa-x')
            } else {
                icon_status.removeClass('fa-solid fa-x').addClass('fa-bars');
            }
        })
        $('.nav-item').click(function () {
            $('.nav-item').removeClass('active');
            $(this).addClass('active');
        });
     })

</script>