Bootstrap 4更改汉堡图标颜色方法

Bootstrap 4提供的CSS预设颜色种类不多，往往默认的不够使用。当修改菜单栏底色后，移动端视图的汉堡菜单图标可能显示不搭，颜色或深或浅。一般这个问题我们会找到CSS类自定义解决，但.navbar-toggler-icon这个类修改方法有所不同，直接添加color属性无效，需要覆盖background-image这个属性。

先用Chrome开发者工具定位CSS类名称，这个属性不好复制，复制不完全。建议打开bootstrap.min.css文件查找。原始CSS属性值是这样的：

.navbar-dark .navbar-toggler-icon{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='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}

修改里面的stroke='rgba(255, 255, 255, 0.5)'数据更改颜色，然后添加到你自定义CSS文件里就可以了。