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

Kevin 杂记 1,379 次浏览 抢沙发

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文件里就可以了。

发表评论

电邮地址用于 Gravatar 头像显示,不会被公开可见。