51288
Bootstrap4のハンバーガーメニューについてなんですが

```

    <span class="navbar-toggler-icon"></span>
    
```

このクラスに対してデフォルトの色から白色に変更をしたいため

```

    span.navbar-toggler-icon {
      color:#fff;
    }
    
```

とかいているんですが色が白色になりません。

この色を変更するにはどうしたら適用されるでしょうか？

こちらdropboxにアップロードした問題点のイメージ画像になります。  
[![問題のハンバーガーメニュー](https://i.stack.imgur.com/GNfO9.jpg)](https://i.stack.imgur.com/GNfO9.jpg)
CC BY-SA 4.0
2018-12-17T04:33:35.010
51281
2018-12-19T05:03:55.777
31018
question
html css bootstrap4
Bootstrap4においてハンバーガーメニューの色変更について
まずHTMLのコード内で、`<span>..</span>`をラップしているボタンにカスタム用のクラス`custom-hamburger`を追加します。

```

    <nav class="navbar navbar-dark bg-dark custom-hamburger">
    　　　　<span class="navbar-toggler-icon"></span>
    </nav>
    
```

CSSで`custom-hamburger`内の`navbar-toggler-icon`に対し、カスタム用の色を指定します。  
Bootstrap4ではSVGを使っているので以下のように`background-
image`の設定を使います。`stroke=white`というように`white`に設定しているため、白いハンバーガーになります。

```

     .custom-hamburger .navbar-toggler-icon{
      　　　　background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }
    
```
CC BY-SA 4.0
2018-12-17T06:46:36.187
51288
2018-12-19T05:03:55.777
2018-12-19T05:03:55.777
31397
31397
51281
answer