在Bootstrap中更改☰图标颜色

Question

I want to change ☰ color.

HTML:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
  <span class="sr-only">Toggle menu navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

我尝试了各种方法（见下文），但没有什么有效的。

CSS：

.icon-bar {
  color: black;
  border-color: black;
  background-color: black;
}

- a1204773

---

你使用的是哪个版本的Bootstrap？https://dev59.com/IGct5IYBdhLWcg3wEJYm - Gotschi

@Gotschi 最新的版本 - a1204773

使用 ！important 覆盖颜色。 - Ranveer

Answer 1

你的CSS无法生效是因为specificity。Bootstrap选择器的特异性比你的高，所以你的样式被完全忽略了。

Bootstrap使用以下选择器来进行样式设置：.navbar-default .navbar-toggle .icon-bar。该选择器的特异性值为B 3，而你的只有B 1。

因此，要覆盖它，只需在你的CSS中使用相同的选择器（假设你的CSS在引入Bootstrap之后）。

.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
}

- James Donnelly

---

@JaydenLawson 我已经撤销了你的编辑。最近已经稍微重新定义了特异性，以删除十进制、串联值。CSS类具有B特异性值为1。当A、B和c值串联时，看起来具有010的特异性，是的，但如果有超过10个类（或者如果你想在这里使用十六进制，则为16个类）会发生什么？特异性不会突然变成100，而是变成0100，但作为一个串联值很难读取，并且应该被表示为0,10,0。 - James Donnelly

放心吧，詹姆斯。至少拼写是正确的 :) - Jayden Lawson

@JamesDonnelly的解释非常有用，真的教会了我为什么那个不起作用，非常感谢您，先生 :) - Mohammed Sufian

Answer 2

尝试使用!important来覆盖CSS样式

像这样

.icon-bar {
   background-color:#FF0000 !important;
}

- Prasanth K C

---

使用!important通常是一个不好的想法，对于这个情况来说，它完全是不必要的。 - James Donnelly

你说了这话，但如果没有重要的东西，它是不起作用的？ - Alan Simes

我提供的答案没有使用 !important，而且已经被接受并获得了超过15个赞。 - James Donnelly

将其添加到您的框架中并覆盖.css文件，它将在不使用!important的情况下正常工作。总之，它需要在初始声明之后声明才能生效。 - heading_to_tahiti

这个方法可以用 - 但不应该成为“首选”。而且如果使用了它，他们总是可以通过使用更具体的!important规则或者更好的方式来覆盖它 - 直接在行内实现！:D（最后一句话是讽刺的） - Radmation

Answer 3

只需要一行代码就足够了。试试这个吧。你可以添加像素来调整图标栏的厚度。

HTML

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span>

  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>

  </button>
  <a class="navbar-brand" href="#" <span class="icon-bar"></span><img class="img-responsive brand" src="img/brand.png">
  </a></div>

CSS

    .navbar-toggle, .icon-bar {
    border:1px solid orange;
}

爆炸...

- Midun

Answer 4

伙计，我完全理解你的感受，但不要忘记 内联样式。它几乎是CSS特异性的超级赛亚人。

所以对于你来说，应该像这样：

<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>

- Seng Wee

Answer 5

我不知道你是否还在寻找这个问题的答案，但今天我遇到了同样的问题并解决了它。 你需要在HTML代码中指定，

**<Div class = "navbar"**>
         div class = "container">
               <Div class = "navbar-header">

或者

**<Div class = "navbar navbar-default">**
        div class = "container">
               <Div class = "navbar-header">

你在CSS中设置了那个位置

.navbar-default-toggle .navbar .icon-bar {
  background-color: # 0000ff;
}

我所做的是在上方添加

.navbar .navbar-toggle .icon-bar {
  background-color: # ff0000;
}

因为我的HTML代码是

**<Div class = "navbar">**
         div class = "container">
               <Div class = "navbar-header">

如果您关联了一个文件 less/css

请搜索此部分并在此处放置您想要更改的颜色，否则它将自动将 css 文件恢复到之前的状态。

// Toggle Navbar
@ Navbar-default-toggle-hover-bg: #ddd;
**@ Navbar-default-toggle-icon-bar-bg: # 888;**
@ Navbar-default-toggle-border-color: #ddd;

如果你的HTML代码和我的一样，不是navbar-default，请像处理CSS一样添加它。

// Toggle Navbar
@ Navbar-default-toggle-hover-bg: #ddd;
**@ Navbar-toggle-icon-bar-bg : #888;**
@ Navbar-default-toggle-icon-bar-bg: # 888;
@ Navbar-default-toggle-border-color: #ddd;

祝你好运

- jesusratti

Answer 6

在Bootstrap 4.3.1中，我可以通过CSS代码将切换器图标的背景颜色更改为白色。

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

在我看来，这个被改变的图标在浅色和深色背景下都很好看。

- feli_x

Answer 7

我正在使用Bootstrap和HTML5。我想覆盖切换按钮的外观。

.navbar-toggle{
    background-color: #5DADB0;
    color: #F3DBAA;
    border:none;        
}

.navbar-toggle.but-menu:link {
    color: #F00;
    background-color: #CF995F;
}

.navbar-toggle.but-menu:visited {
    color: #FFF;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:hover {
    color: #FFF0C9;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:active {
    color: #FFF;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:focus {
    color: #FFF;
    background-color: #CF995F;
}

- Sylviamc