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

I tried @Zim's solution and it worked perfectly, thanks for sharing. I did make 2 slight adjustments:

1. I changed border-0 to border-1 to keep a border around the hamburger image.
2. I added a background color on the div since the X ended up being a similar color to my existing background.