Bootstrap4のハンバーガーメニューのボタンを開閉時に変更したい

Bootstrapの三本線のトグルボタンは簡単に設置できて便利だなと思ったのですが、ハンバーガーメニューを開いても閉じるアイコンに変わらないのは仕様でしょうか？
メニューの開閉に合わせて閉じるボタンに変えたいと思っているのですが可能ですか？
調べてもBootstrap3しかでてこなくて四苦八苦しています。
html自体は特別なことはしていないと思います。

html
1<nav id="NavFixed" class="navbar fixed-top navbar-expand-md navbar-light bg-light">
2  <a class="navbar-brand" href="#">Navbar</a>
3  <button id="navbtn" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="Toggle navigation">
4    <span class="navbar-toggler-icon"></span>
5  </button>
6  <div class="collapse navbar-collapse" id="Navber">
7    <ul class="navbar-nav justify-content-center text-center mt-4 mt-ms-0 m-md-auto">
8      <li class="nav-item"> <a class="nav-link py-4 px-3" href="#">ブログ</a> </li>
9      <li class="nav-item"> <a class="nav-link py-4 px-3" href="link.html">リンク</a> </li>
10    </ul>
11  </div>
12</nav>

行動規範の内容に同意します

回答1件

ベストアンサー

Bootstrap 4 のアイコンは(CSSに埋め込まれた)画像になっているので、同様に開いたときの画像を用意してみてはどうでしょうか？

CSS
1.navbar-light .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
2  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M6 6L 24 24M24 6L6 24'/%3E%3C/svg%3E");
3}
4
5.navbar-dark .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
6  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M6 6L 24 24M24 6L6 24'/%3E%3C/svg%3E");
7}