How can I achieve this with flexbox

Hi guys, I’m trying to do exactly this with html & css flexbox but I’m struggling to get the font ontop on the text.

Which font, are you talking about the menu or those three “boxes” (address, phone and email)?

Hi yes, what would the html look like.

This is mine :

<main class="section section-light">
      <h2>Contact Us</h2>
      <div class="contact-icons-container">
        <ul class="contact-icons">
          <li>
            <span class="icon">
              <i
                class="fa fa-phone fa-10x"
                aria-hidden="true"
                role="presentation"
              ></i>
              <h2>Phone</h2>
              <a href="”tel:+″">071</a>
              <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Debitis, totam!
              </p>
            </span>
          </li>

          <li>
            <span class="icon">
              <i
                class="fa fa-map-marker"
                aria-hidden="true"
                role="presentation"
              ></i>
              <h2>Address</h2>
              <address>
                
                </a>
              </address>
            </span>
          </li>

          <li>
            <span class="icon">
              <i
                class="fa fa-envelope"
                aria-hidden="true"
                role="presentation"
              ></i>
              <h2>Email</h2>
              
            

              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae,
                harum.
              </p>
            </span>
          </li>
        </ul>
      </div>
    </main>

and this is what my css looks like

.contact-icons,
.contact-icons li {
  display: flex;
  -webkit-justify-content: center;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0;
}

.contact-icons {
  width: 100%;
  list-style: none;
  flex-wrap: wrap;
}

.contact-icons li {
  flex-basis: 25%;
  flex-shrink: 0;
  flex-grow: 1;
}

.contact-icons i {
  font-size: 15em;
  margin-right: 0.5em;
  color: #666;
}

Sorry, still a little confused. Your three boxes are next to each other as they should be with flexbox. Is the problem that the icons don’t show? You’d need to download the fontawesome CSS file for that, I think you’ll need an email address to register.
(You also might want to edit your post to remove your contact details…)

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).