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

【问题标题】：Change Color Of Bootstrap Vue Collapsed Navbar Icon更改 Bootstrap Vue 折叠导航栏图标的颜色
【发布时间】：2020-04-15 01:29:01
【问题描述】：

我已将 Bootstrap Vue 集成到我的项目中，但很难对其进行自定义。具体来说，我说的是Navbar component。

我已阅读文档并看到我可以对导航栏应用一个变体来定义整个导航栏的颜色。

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

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

我尝试对他们每个人应用规则：

color: white !important;

但这没有结果。

我在网上和 SO 中查看过，但没有找到任何可以解决这种情况的内容。

导航栏打开：

导航栏折叠：

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

【问题讨论】：

【解决方案1】：

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

如果您尝试更改图标颜色 - 它是内联背景 svg。你只能用你自己的文件覆盖它。

【讨论】：

【解决方案2】：

我设法通过使用以下选择器解决了这种情况：

.navbar-toggler > .navbar-toggler-icon {
  background-color: white; 
}

@Ivan Klochkov 为我指明了正确的方向，但我不得不在正确的选择器上搞砸了。

【讨论】：