Twitter bootstrap 3.0 icon change on collapse

Question

This is about Bootstrap 3.0. I would like the icon/glyphicon to change on collapse. I.e, from a closed folder to an open one.

I have searched far and wide, and have

Answer 1

Here is my solution:

$('.navbar-toggle').on('click', function() {
    $(this).toggleClass('mobile-close');
})

Hide default icon bars:

.mobile-close span {
  display: none !important;
}

Then you can style mobile-close something like:

.navbar-toggle.mobile-close {    
  cursor: pointer;
  width: 42px;
  height: 32px;
  line-height: 40px;
}
.navbar-toggle.mobile-close:before {
  content: "×";
  font-size: 40px;
  color: #231f20;
 }