Colocar o icone "X" no navbar-toggle do bootstrap 3

[JoaoCardoso 0]

Pessoal, alguém pode me dar uma sugestão de como fazer isso?

[André do Vale 76]

Achei um artigo pronto, em inglês, do que você procura:

http://julienmelissas.com/animated-x-icon-for-the-bootstrap-navbar-toggle/

[JoaoCardoso 0]

Achei um artigo pronto, em inglês, do que você procura:

http://julienmelissas.com/animated-x-icon-for-the-bootstrap-navbar-toggle/

Pois é André, eu tinha visto esse artigo, mas fiquei um pouco confuso, pois não trabalho com Less ainda.

[André do Vale 76]

Less não é complicado. É CSS de forma ágil e melhor modulado. E, no CodePen, basta você olhar o código complicado:

.navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.2s;
}
.navbar-toggle .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
  opacity: 0;
}
.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
}

[JoaoCardoso 0]

Obrigado André.