Bootstrap выравнивание текста и изображения по горизонтали

Question

Я пытаюсь создать страницу с помощью bootstrap 4. У меня проблема с выравниванием моей панели навигации. В каждом списке моего списка есть изображение. Вся ул вертикальная. я не понимаю. Хочу поставить горизонтальную навбар.

<nav class="navbar navbar-light bg-transparent navbar-expand-md text-center pt-5">
    <div class="container-fluid">
        <div class="navbar-brand"><img src="[https://stackoverflow.com/logo.png][1]"></div>

        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarText">
            <span class="navbar-toggler-icon"></span>
          </button>

        <div class="collapse navbar-collapse  text-center" id="navbarText">
            <ul class="nav navbar-nav ml-auto">
                <li class="navbar-item active">
                    <img src="[https://stackoverflow.com/maison.png"][1] class="icone ">
                    <a class="nav-link" href="#"></i>Maison</a>
                </li>
                <li class="navbar-item">
                    <img src="[https://stackoverflow.com/equipe.png][1]" class="icone">
                    <a class="nav-link" href="#">Equipe</a>
                </li>
                <li class="navbar-item">
                    <img src="[https://stackoverflow.com/services.png][1]" class="icone">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="navbar-item">
                    <img src="[https://stackoverflow.com/client.png][1]" class="icone">
                    <a class="nav-link" href="#">Client</a>
                </li>
                <li class="navbar-item">
                    <img src="[https://stackoverflow.com/contact.png][1]" class="icone">
                    <a class="nav-link" href="#">Contact</a>
                </li>
                <li class="navbar-item">
                    <img src ="[img/png/newsletter.png][1]" class="icone">
                    <a class="nav-link" href="#"> Newsletter</a>
                </li>
            </ul>
        </div>
     </div>  
</nav> 



 .bg-transparent{
     background-color: transparent;
  }
 .icone{
     width: 10%;
     height: auto;
  }