Horizontal Layout navbar icons are too down, out of line with text

[rizkytegar]

I use Horizontal Layout, but I think the icon is less attractive because it doesn't align with the text.

Then I moved the tag (bootstrap icon) into the tag

Default mazer

<li class="menu-item ">
    <a href="index.html" class='menu-link'>
        <i class="bi bi-grid-fill"></i><span>Dashboard</span>
    </a>
</li>

my code

<li class="menu-item ">
    <a href="index.html" class='menu-link'>
        <span><i class="bi bi-grid-fill"></i> Dashboard</span>
    </a>
</li>

Desktop

left is my code, right is mazer

Mobile

any references or suggestions to align the icon with the text ? . I don't really understand about the front end

[rizkytegar]

How about like this?

 <li class="menu-item">
    <a href="/" class='menu-link'>
        <i class="bi bi-grid-fill minus"></i><span>Dashboard</span>
    </a>
</li>
<style>
    .minus{
        margin-top:-11px
    }
</style>

it is quite accurate, including in the mobile version

[zuramai]

Can you make a pull request out of it? Thank you