Material Design Lite - zmień kolor ikony szuflady

Nie mogę znaleźć sposobu na zmianę ikony hamburgera szuflady. Niech to kod robi Dyskusja:Material Design Lite - zmień kolor ikony szuflady

KODEKS

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>drawer icon color</title> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> 
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
    </head> 

    <body> 
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> 
     <header class="mdl-layout__header"></header> 
     <div class="mdl-layout__drawer"></div> 
    </div> 
    </body> 
</html>

WYDRUKOWANY

output result

Ikona wydaje się być dodawane dynamicznie potem kolorem ustawionym na białym:

browser generated code

Kiedy zmieniam kolor z mojej konsoli chromowej, wszystko jest w porządku.
Ale gdy próbuję przy użyciu klasy css nie działa:

.mdl-layout__header .mdl-layout__drawer-button { 
    color: #000 !important; 
}

moje pytanie

Czy mam jakieś inne rozwiązania niż zmiana koloru dynamicznie poprzez DOM lub bezpośrednio ingerować w materiał .min.js?

(Nie powodzeniem zmienić kolor przy użyciu javascript nie)

<script type="text/javascript"> 
    document.querySelector(".mdl-layout__header .mdl-layout__drawer-button").style.color = "red"; 
</script>

Dzięki! ♫ ♪ Życzę Wam wesołych świąt ♫ ♪ ♫

Źródło

2016-12-23 lemour_a

Moja sugestia byłoby odejść od materiału, a zamiast używać FontAwesome. Mniej kodu, bez JS, tylko CSS, i to działa ... – junkfoodjunkie

Dodałem nr i -tag z ikon materiałowych do twojego CSS. To działa dobrze. Zobacz fragment:

.mdl-layout__header .mdl-layout__drawer-button i { 
 
    color: #000; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>drawer icon color</title> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> 
 
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> 
 
    <header class="mdl-layout__header"></header> 
 
    <div class="mdl-layout__drawer"></div> 
 
    </div> 
 
</body> 
 

 
</html>

Źródło

2016-12-23 14:59:23

Próbowałem już tej odpowiedzi, ale w arkuszu stylów CSS połączonym ze składnikiem kątowym, w którym znajduje się część nagłówka. Styl nie został zastosowany do ikon, dlatego składnik kątowy stosuje styl tylko do szablonu z nim powiązanego. Dziękuję za odpowiedź, pokazałeś mi, że działa z vanillia html/css i dzięki temu zauważyłem, że mój błąd był związany z kanciastą. Nauczyłem się czegoś! –

Dziękujemy za opinię! –

Material Design Lite - zmień kolor ikony szuflady

Odpowiedz

Powiązane problemy