在折叠的导航栏组件中使用CSS更改glyphicon的颜色

我在以下网站上有一个问题：

为了查看问题，请垂直调整网站大小，以便显示收拢的导航栏

在构成移动视口导航栏中的小按钮组件的HTML中，有3个

元素，其类为

.icon bar

。我试图用CSS设计悬停和聚焦状态，以便使条形图标的颜色为蓝色

   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="#">Brand</a>
    </div>

我不明白为什么我的CSS规则没有将条形图标的焦点和活动状态设置为蓝色，如下所示，这可能是CSS特有的问题：

.navbar-inverse .navbar-toggle .icon-bar:hover, .navbar-inverse .navbar-toggle .icon-bar:focus {
  color: #5979CD;
}

---

我认为这是在你的styles.css（第75行）中，它覆盖了引导

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
  background-color: #FFF;
}

---

如果希望图标栏元素为不同的颜色，则当您将鼠标悬停在按钮上时，鼠标悬停和焦点规则应位于按钮上，如下所示：

.navbar-inverse .navbar-toggle:hover .icon-bar,
.navbar-inverse .navbar-toggle:focus .icon-bar
{
    background-color: #5979CD;
}

---

字形图标与字体相同，使用颜色值。它的工作。这是一个类似的问题示例格式请-什么是十六进制颜色代码的替代品？图标栏{color:white或#fff}@Nucleo1985，如果有的话，那么就

。图标栏{color:white}

或

。图标栏{color:#fff}

-这就是你的意思，对吗？）。导航栏标题。导航栏切换。图标栏{背景：红色}这是更改图标颜色的工作

.navbar-inverse .navbar-toggle:hover .icon-bar,
.navbar-inverse .navbar-toggle:focus .icon-bar
{
    background-color: #5979CD;
}