ブートストラップ4のnavbar-toggler-iconを非表示にして置き換える方法は？

Question

Bootstrap 4のnavbar-toggler-iconを非表示にして置き換えますか？今のところ、以下のコードはハンバーガーメニューの下に 'X'を置きます。

<nav class="navbar navbar-toggleable-md"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
    data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" 
    aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarsExampleDefault"> 

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
    data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" 
    aria-label="Toggle navigation"> 
    <span>X</span> 
    </button> 
</nav> 

Answer 1

コードには2つのトグルがありますが、その理由はわかりません。あなただけの

<nav class="navbar navbar-faded navbar-toggleable-md"> 
    <button class="navbar-toggler navbar-toggler-right py-2" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> 
     <span>X</span> 
    </button> 
    <a href="" class="navbar-brand">Brand</a> 
    <div class="collapse navbar-collapse" id="navbarsExampleDefault"> 
     <ul class="navbar-nav"> 
      <li><a href="">Link</a></li> 
     </ul> 
    </div> 
</nav> 

EDITはハンバーガートグラーアイコンと近いXを切り替えるには... Xの正規navbar-toggler-iconを交換する必要がある、あなたはnavbar-toggler内部Xとハンバーガーのアイコンの両方を持っている必要があると思います。 navbarのcollapsedの状態を処理するCSSを追加します。

.navbar-toggler>.close { 
    display:inline; 
} 
.navbar-toggler.collapsed>.close, .navbar-toggler:not(.collapsed)>.navbar-toggler-icon { 
    display:none; 
} 

http://www.codeply.com/go/fgHv33Q6UM