更改Bootstrap Vue折叠的导航栏图标的颜色

Question

我已经将Bootstrap Vue集成到我的项目中，并且很难对其进行自定义。具体来说，我在谈论Navbar component。

我已经阅读了文档，看到可以对导航栏应用一个变体，该变体将定义整个导航栏的颜色。

事实是，我没有为导航栏提供变体（并且不想这么做），当它折叠时，折叠的菜单图标（汉堡菜单图标）为黑色，由于我的背景颜色不可见网站。

我已经检查了网站的DOM，并使用了以下CSS规则和选择器：

• .navbar-toggle

• .navbar-toggler

• .navbar-toggler-icon

[我尝试对每个规则应用规则：

color: white !important;

但是没有结果。

我在网上和SO中都看过，但找不到解决此情况的任何方法。

导航栏打开：

导航栏折叠：

显然，我可以更改网站的背景颜色，但我不想这样做，因为我不想因为一个小问题而更改网站的外观和感觉（我希望能够知道如何克服这个问题。

Link to code

Answer 1

查看您的代码-.navbar-toggle和.navbar-toggler只是普通的div，因此color属性仅会影响文本颜色。

[如果您尝试更改图标颜色-这是嵌入式背景svg。您只能使用自己的文件覆盖它。