title: How to hide and replace navbar-toggler-icon in Bootstrap 4?
body: <p>How do you hide and replace the navbar-toggler-icon in Bootstrap 4? Right now the code below just puts the 'X' below the hamburger menu.</p>
  
  <pre><code>&lt;nav class="navbar navbar-toggleable-md"&gt;
    &lt;button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
    data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" 
    aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
  
    &lt;div class="collapse navbar-collapse" id="navbarsExampleDefault"&gt;
  
       &lt;button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
    data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" 
    aria-label="Toggle navigation"&gt;
      &lt;span&gt;X&lt;/span&gt;
    &lt;/button&gt;
  &lt;/nav&gt;
  </code></pre>