My icons and texts are in different list tags. Icons aren't aligned with their titles. They are written as two unordered lists. The only solution I have right now is to merge lists to one ul, but I'm hoping there is a better way to do it. Any help would be very much appreciated.

<ul>
    <li><i class="fa fa-cog"></i></li>
    <li><i class="fa fa-home"></i></li>
    <li><i class="fa fa-user"></i></li>
    <li><i class="fa fa-cart"></i></li>
</ul>
<ul>
    <li>Settings</li>
    <li>Home</li>
    <li>Account</li>
    <li>Cart</li>
</ul>

Method 1: If you don't want icons and texts to be in same ul try defining fixed width for lis.

li {
    display: inline-block;
    margin: 0 40px;
    text-align: center;
    width: 100px;
}

Method 2: If you can Integrate 2 lists, that is better solution:

<ul>
    <li><i class="fa fa-cog"></i>Settings</li>
    <li><i class="fa fa-home"></i>Home</li>
    <li><i class="fa fa-user"></i>Account</li>
    <li><i class="fa fa-cart"></i>Cart</li>
</ul>

ul li {
    display: inline-block;
    margin: 0 30px;
    text-align: center;
}
ul li i {
    display: block;
    /* add margins here to adjust icons */
}