title: Bootstrap navbar text and image horizontal alignement
body: <p>I try to create a page with bootstrap 4.
  I have a problem with alignment of my navbar. There are an image in each li of my list. All the ul is vertical. i don't understand.  I want to put an horizontal navbar.</p>
  
  <pre><code>&lt;nav class="navbar navbar-light bg-transparent navbar-expand-md text-center pt-5"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-brand"&gt;&lt;img src="[https://stackoverflow.com/logo.png][1]"&gt;&lt;/div&gt;
  
          &lt;button class="navbar-toggler" data-toggle="collapse" data-target="#navbarText"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
            &lt;/button&gt;
  
          &lt;div class="collapse navbar-collapse  text-center" id="navbarText"&gt;
              &lt;ul class="nav navbar-nav ml-auto"&gt;
                  &lt;li class="navbar-item active"&gt;
                      &lt;img src="[https://stackoverflow.com/maison.png"][1] class="icone "&gt;
                      &lt;a class="nav-link" href="#"&gt;&lt;/i&gt;Maison&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="navbar-item"&gt;
                      &lt;img src="[https://stackoverflow.com/equipe.png][1]" class="icone"&gt;
                      &lt;a class="nav-link" href="#"&gt;Equipe&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="navbar-item"&gt;
                      &lt;img src="[https://stackoverflow.com/services.png][1]" class="icone"&gt;
                      &lt;a class="nav-link" href="#"&gt;Services&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="navbar-item"&gt;
                      &lt;img src="[https://stackoverflow.com/client.png][1]" class="icone"&gt;
                      &lt;a class="nav-link" href="#"&gt;Client&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="navbar-item"&gt;
                      &lt;img src="[https://stackoverflow.com/contact.png][1]" class="icone"&gt;
                      &lt;a class="nav-link" href="#"&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="navbar-item"&gt;
                      &lt;img src ="[img/png/newsletter.png][1]" class="icone"&gt;
                      &lt;a class="nav-link" href="#"&gt; Newsletter&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
       &lt;/div&gt;  
  &lt;/nav&gt; 
  
  
  
   .bg-transparent{
       background-color: transparent;
    }
   .icone{
       width: 10%;
       height: auto;
    }
  </code></pre>