css - poner - Cambiar el color de la barra de iconos(☰) en el arranque

como poner iconos en la barra de tareas windows 10

Question

Quiero cambiar el 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>

Intenté varias cosas (mira abajo) pero nada funciona.

CSS:

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

Answer 1

Amigo, sé totalmente cómo te sientes, pero no te olvides del estilo en línea . Es casi el súper saiyan de la especificidad de CSS

Por lo tanto, debería verse algo como esto para ti,

<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>

Answer 2

Estoy usando Bootstrap y HTML5. Quería anular el aspecto del botón de alternar.

.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;
}

Answer 3

La razón por la que su CSS no funciona es debido a la specificity . El selector Bootstrap tiene una especificidad más alta que la tuya, por lo que tu estilo se ignorará por completo.

Bootstrap .navbar-default .navbar-toggle .icon-bar esto con el selector: .navbar-default .navbar-toggle .icon-bar . Este selector tiene un valor de especificidad B de 3, mientras que el suyo solo tiene un valor de especificidad B de 1.

Por lo tanto, para anular esto, simplemente use el mismo selector en su CSS (suponiendo que su CSS esté incluido después de Bootstrap):

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

Answer 4

No sé si todavía está buscando la respuesta a este problema, pero hoy sucedió el mismo problema y lo resolvió. Debe especificar en el código HTML,

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

o

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

Tienes ese lugar en tu CSS

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

y lo que hice fue agregar arriba

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

Porque mi código html es

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

y si asocias un archivo menos / css

busque esta sección y también aquí coloque el color que desea cambiar; de lo contrario, se autocorregirá el archivo CSS en el estado en que se encontraba antes

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

si tu código html es como el mío y no es el predeterminado de la barra de navegación, agrégalo como lo hiciste con el 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;

buena suerte

Answer 5

Prueba el uso excesivo de CSS usando !important

Me gusta esto

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

Answer 6

Solo una línea de codificación es suficiente ... solo prueba esto. y puede ajustar incluso gruesas de barra de iconos con esto agregando píxeles.

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;
}

AUGE...