How to organize icons on navbar using Bootstrap in a Blazor WASM app with .NET 6?

Question

I'm working on an e-commerce app and I want to properly organize the icons on my navbar using Bootstrap 5 CSS. Specifically, I want to display the icons side by side, with equal spacing, and have the username appear right under the green login icon. Can someone provide guidance on how to accomplish this?

Here's the code I'm currently working with:

 <div class="navbar align-self-center d-flex">
    <div class="d-lg-none flex-sm-fill mt-3 mb-4 col-7 col-sm-auto pr-3">
        <div class="input-group">
            <input type="text" class="form-control" id="inputMobileSearch" placeholder="Search ...">
            <div class="input-group-text">
                <i class="fa fa-fw fa-search"></i>
            </div>
        </div>
    </div>
    <a class="nav-icon d-none d-lg-inline" href="#" data-bs-toggle="modal" data-bs-target="#templatemo_search">
        <i class="fa fa-fw fa-search text-dark mr-2"></i>
    </a>
    <a class="nav-icon position-relative text-decoration-none" href="#">
        <i class="fa fa-fw fa-cart-arrow-down @(GetCartCount() > 0 ? "bg-light text-green" : "bg-light text-dark") mr-1"></i>
        <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">@GetCartCount()</span>
    </a>
    <AuthorizeView>
        <Authorized>
            <a class="nav-icon position-relative text-decoration-none" href="#">
                <i class="fa fa-fw fa-user text-green mr-3"></i>
                @* <div class="user-name" style="display: block; margin-top: 3px; font-size: 11px !important;">@context.User.Identity.Name</div> *@
            </a>
            <a class="nav-icon position-relative text-decoration-none" href="logout" >
                <i class="fa fa-fw fa-sign-in-alt text-dark mr-3"></i>
            </a>
        </Authorized>
        <NotAuthorized>
            <a class="nav-icon position-relative text-decoration-none" href="login">
                <i class="fa fa-fw fa-sign-out-alt text-dark mr-3"></i>
                @* <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark"></span> *@
            </a>
            <a class="nav-icon position-relative text-decoration-none" href="signup">
                <i class="fa fa-fw fa-user-plus text-dark mr-3"></i> <!-- Register icon -->
                @* <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark"></span> *@
            </a>
        </NotAuthorized>
    </AuthorizeView>
</div>

<AuthorizeView>
    <Authorized>
        <a class="nav-icon position-relative text-decoration-none" href="#">
            <div class="user-icon-and-name">
                <i class="fa fa-fw fa-user text-green mr-3"></i>
                <span class="user-name">@context.User.Identity.Name</span>
            </div>
        </a>
        <a class="nav-icon position-relative text-decoration-none" href="logout" >
            <i class="fa fa-fw fa-sign-in-alt text-dark mr-3"></i>
            
        </a>
    </Authorized>
    <NotAuthorized>
        <a class="nav-icon position-relative text-decoration-none" href="login">
            <i class="fa fa-fw fa-sign-out-alt text-dark mr-3"></i>
        </a>
        <a class="nav-icon position-relative text-decoration-none" href="signup">
            <i class="fa fa-fw fa-user-plus text-dark mr-3"></i>
         </a>
    </NotAuthorized>
</AuthorizeView>

And here's the custom CSS I've added so far:

.text-green {
    color: #28a745; /* Bootstrap's .text-success color, or you can use any green color you prefer */
}
.user-icon-and-name {
    text-align: center; /* Center the contents */
}
.user-name {
    display: block; /* Make the span a block element to ensure it appears on a new line */
    margin-top: 3px; /* Adjust the space between the icon and the name */
    font-size: 11px !important;
}

Here is how I wanted to position;