Navbar positioning

Get Help CSS
#1

Hi, I am working on a Frontend Portfolio project.
I am struggling positioning my navbar. My goal is to place the home, person and mail icons directly under the “HOME”, “ABOUT” and “CONTACT” links.

My html code looks like below:

<nav>
                <ul>
                    <li id="homeButton">HOME</li>
                    <li id="aboutButton"><a href="./about.html">ABOUT</a></li>
                    <li id="contactButton"><a href="./contact.html">CONTACT</a></li>
                </ul>
                <div class="material-icons">
                    <i class="icons" id="homeIcon">home</i>
                    <i class="icons" id="personIcon">person</i>
                    <i class="icons" id="mailIcon">mail</i>
                </div>
            </nav>

And my css code below for this section:

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  list-style: none;
}

nav .material-icons {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: auto;
  border: 1px solid white;
}

.icons {
  font-style: normal;
  border: 1px solid white;
}

Can anyone suggest a solution?

Thanks in advance.

#2

Hey you could try placing the icon in each list item. Then styling each list item so the icon is centered under the text.
Let me know if that works out for you!