Zmiana koloru paska ikony (☰) w bootstrapie

Chcę zmienić kolor ☰.Zmiana koloru paska ikony (☰) w bootstrapie

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>

Próbowałem różnych rzeczy (patrz poniżej), ale nic nie działa.

CSS:

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

Źródło

2013-12-12 a1204773

która wersja Bootstrap używasz? http://stackoverflow.com/questions/12379153/can-i-add-color-to-bootstrap-icons-only-using-css – Gotschi

pokaż swój jsfiddle – shankar

@Gotschi najnowszy – a1204773

Powodem Twój CSS nie działa z powodu specificity. Selektor Bootstrap ma wyższą specyfikę niż Twoja, więc Twój styl jest całkowicie ignorowany.

Podpiera style przez: .navbar-default .navbar-toggle .icon-bar. selektor ten ma B wartość specyficzności 3, natomiast twój ma tylko B wartość specyficzności 1.

Dlatego, aby to zmienić, wystarczy użyć tego samego selektor w CSS (zakładając, że Twój CSS jest wliczone po Bootstrap'S):

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

Źródło

2013-12-12 10:17:45

To działało, dziękuję bardzo !! – a1204773

@JaydenLawson Wycofałem twoją edycję. Definicja specyficzności została ostatnio nieco zmieniona, aby usunąć dziesiętne, połączone wartości. Klasa CSS ma a * b * wartość specyficzności 1. Gdy * A *, * B * i * c * Wartości są łączone, wydaje się mieć specyficzność 010, tak, ale to, co się dzieje, gdy istnieje więcej niż 10 klasy (lub 16, jeśli chcesz użyć tutaj heksadecymalnej)? Specyfika nie stałaby się nagle 100, wtedy byłaby 0100, ale jako łączna wartość, która jest trudna do odczytania i powinna być faktycznie reprezentowana jako 0,10,0. –

Bez obaw @ James. Przynajmniej pisownia jest poprawna :) –

Spróbuj nadrzędnego CSS użyciu !important

jak ten

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

Źródło

2013-12-12 10:16:35

+10

Używanie '! Important' jest generalnie złym pomysłem, a do tego jest zupełnie niepotrzebne. –

Mówisz tak, ale bez ważnego nie działa? –

@AlanSimes odpowiedź mam przewidziane na to pytanie nie używa 'important'! I została przyjęta i upvoted zarówno więcej niż 15 razy. –

nie wiem, jeśli wciąż szuka odpowiedzi na ten problem, ale dzisiaj się ten sam problem i rozwiązać go. musisz określić w kodzie HTML,

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

lub

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

Masz to miejsce w CSS

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

i co zrobiłem było dodać ponad

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

Ponieważ m y kod HTML jest

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

a jeśli skojarzyć plik mniej/css

wyszukiwarki tę sekcję i również tutaj umieszczone koloru, który chcesz zmienić, w przeciwnym razie będzie to self-poprawny plik css do stanu to było przed

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

jeśli kod HTML jest jak moje i nie jest NavBar-default, dodaj go jak to było z 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;

powodzenia

Źródło

2015-05-19 03:29:48 jesusratti

Tylko jedna linia kodowania wystarczy .. po prostu spróbować to. i możesz dostosować nawet grubość paska ikon, dodając piksele.

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

BOOM ...

Źródło

2016-08-27 01:58:37 Midun

Używam Bootstrap & HTML5. Chciałem nadpisać wygląd przycisku przełącznika.

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

Źródło

2017-04-29 15:20:58 Sylviamc

Dude wiem zupełnie, jak się czujesz, ale nie zapomnij o inline Styling. Jest prawie Super Saiyan specyfiki CSS

Tak powinno to wyglądać mniej więcej tak dla ciebie,

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

Źródło

2017-06-27 15:30:40

Zmiana koloru paska ikony (☰) w bootstrapie

Odpowiedz

Powiązane problemy