Bootstrap mobile menu icon change to x close

Question

EDIT

@zim answer uses 2020 CSS to easily solve the issue and better applies to Bootstrap 4.

The original question and selected answer are still

Answer 1

As of Bootstrap 4.1, the "hamburger" toggler is no longer tags, and is now a single SVG icon background image.

Therefore it's simplest to swap it out with a little CSS. Then you can use another font icon (like FontAwesome) or a simple '✖' character...

   
        
        
✖
   

   /* hide close when burger shown */
   .navbar-toggler.collapsed .close-icon {
      display: none;
   }

   .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
      display: inline;
   }

Demo

---

Another option is this animated hamburger:
https://codeply.com/p/L9HT5GaUtt