css - 在 Vue Bootstrap 中更改汉堡包图标颜色
问题描述
我想将 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 更改切换器的颜色。您可以将其更改为stroke
您<path>
想要的颜色。
如果您在 vue 组件 ( <style scoped>
) 中使用范围样式标签,那么您可能需要使用深度选择器来正确定位切换图标。
.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 上找到了这个特定的 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>
推荐阅读
- python - 如何使用 Tensorflow 设置分类标签并将数据拆分为训练、测试和开发拆分?
- javascript - 在页面加载时启动 SVG 动画的简单 JavaScript 代码是什么?
- facebook - 添加 facebook 应用程序事件包颤动后 Firebase 动态链接缺少插件异常
- unity3d - 在 Vuforia 中,检测到了我的图像目标。我的笔记本电脑上一切正常,但我的 Android 上的 GameObject 是粉红色的
- javascript - 我可以从 NodeJs 服务器访问网页上的网络流量数据吗?
- ios - iOS 系统库即使不添加到“框架、库和嵌入式内容”也可以导入
- r - 仅使用 Signif 提取变量和系数。R 小于 0.05
- javascript - Webpack 文件加载器未在生产构建中加载资产文件夹
- ruby-on-rails - Ruby graphql 如何定义不是 Active Record 的对象类型?
- git - 为什么我的 Git 无法通过终端进行更新?