How to vertically align navbar link when used with icon that is larger than default?-CodePudding

Using Bootstrap 5 with Bootstrap Icons, I also enlarged the icon using font-size:1.5rem;, but that broke the vertical alignment for the links (If you remove the styling you can see it's working again, need to be in Full Page mode)

I could not find the correct way to vertically align it again:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>


<!-- Navigation-->
<nav  id="mainNav">
    <div >
        <a  href="/">Navbar</a>
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i ></i>
        </button>

        <div  id="navbarResponsive">
            <ul >
                <li ><a  href="#">Menu Item #1</a></li>
                <li ><a role="button" ><i  style="font-size:1.5rem;"></i>Menu Item With Icon</a></li>
                <li ><a  href="#">Menu Item #3</a></li>
            </ul>
        </div>
    </div>
</nav>

CodePudding user response：

Try adding the "d-flex" and "align-items-center" classes to that nav-link:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>


<!-- Navigation-->
<nav  id="mainNav">
    <div >
        <a  href="/">Navbar</a>
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i ></i>
        </button>

        <div  id="navbarResponsive">
            <ul >
                <li ><a  href="#">Menu Item #1</a></li>
                <li ><a role="button" ><i  style="font-size:1.5rem;"></i>Menu Item With Icon</a></li>
                <li ><a  href="#">Menu Item #3</a></li>
            </ul>
        </div>
    </div>
</nav>