在 Vue Bootstrap 中更改汉堡包图标颜色答案

【问题标题】：Change hamburger icon color in Vue Bootstrap在 Vue Bootstrap 中更改汉堡包图标颜色
【发布时间】：2020-08-10 04:19:03
【问题描述】：

我想将 Vue Bootstrap Hamburger navbar-toggler-icon 更改为白色。

我尝试了所有我能想到的代码组合，但没有运气。当我加载应用程序时，CSS 将恢复为原始引导 URL。有什么想法吗？

这是我在样式部分尝试的：

 .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 255)") !important;
    }

有什么想法吗？谢谢，

【问题讨论】：

你试过的 CSS 是什么？
我的术语可能有误，但我在 vue 应用程序的

标签： css vue.js bootstrap-4 hamburger-menu bootstrap-vue

【解决方案1】：

您可以使用此 CSS 更改切换器的颜色。您可以将<path> 上的stroke 更改为您想要的颜色。

如果您在 vue 组件中使用了作用域样式标签 (<style scoped>)，那么您可能需要使用 deep selector 来正确定位切换图标。

.navbar-toggler-icon {
   background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important;
}

我在 Bootstrap github here 上找到了这个特定的 CSS

new Vue({
  el: '#app',
  data() {
    return {
      fields: [
        // A column that needs custom formatting
        { key: 'name', label: 'Full Name' },
        { key: 'age', label: 'Age' },
        { key: 'sex', label: 'Sex' }
      ],
      items: [
        { name: { first: 'John', last: 'Doe' }, sex: 'Male', age: 42 },
        { name: { first: 'Jane', last: 'Doe' }, sex: 'Female', age: 36 },
        { name: { first: 'Rubin', last: 'Kincade' }, sex: 'Male', age: 73 },
        { name: { first: 'Shirley', last: 'Partridge' }, sex: 'Female', age: 62 }
      ]
    }
  }
})

.navbar-toggler-icon {
   background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important;
}

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.12.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.12.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-navbar toggleable="xl" type="dark" variant="info">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">Link</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

【讨论】：

你是对的。我必须使用深度选择器来正确定位图标！谢谢！

【解决方案2】：

您还可以使用文档中的默认颜色选项。当您将type 设置为dark 或light 时，它将显示一个白色或黑色图标。

参考：Vue-Bootstrap 导航栏：https://bootstrap-vue.org/docs/components/navbar

【讨论】：