malzeme tasarımı lite - çizge simgesini değiştir

Çekmece hamburger simgesini değiştirmenin bir yolunu bulamıyorum. Let var konuşma yapıyor kodu:malzeme tasarımı lite - çizge simgesini değiştir

KOD

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

output result

simge beyaz olarak ayarlanmış renk ile dinamik olarak sonradan eklenecek görünüyor ÇIKIŞ:

browser generated code

Rengi krom konsolumdan değiştirdiğimde her şey yolunda.
Ama css sınıfını kullanarak çalışırsanız çalışmıyor:

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

MY SORU

Ben DOM aracılığıyla dinamik olarak rengini değiştirerek veya doğrudan malzeme ile karıştırmasını dışında başka çözümler var mı .min.js?

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

Teşekkür (başarıyla ne javascript kullanarak rengini değiştirmek vermedi)! ♫ you Keşke mutlu bir noel diliyorum

kaynak

2016-12-23 lemour_a

Benim önerim uzağa Malzemeden gitmek olurdu ve bunun yerine FontAwesome kullanın: pasajı bakınız. Daha az kod, JS yok, sadece CSS ve sadece çalışır ... – junkfoodjunkie

Malzeme simgelerinden CSS'nize i-etiketini ekledim. Bu iyi çalışıyor.

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

kaynak

2016-12-23 14:59:23

Bu cevabı zaten denedim ama başlık parçasının bulunduğu bir açısal bileşene bağlı bir css stil sayfasında. Stil, bu nedenle simgelere uygulanmadı, açısal bileşen stili yalnızca kendisine bağlı şablona uygular. Cevabınız için teşekkür ederim, bana vanillia html/css ile çalıştığını ve hatamın açısal ile ilgili olduğunu fark ettim. Bir şey öğrendim! –

Geri bildiriminiz için teşekkür ederiz! –

malzeme tasarımı lite - çizge simgesini değiştir

cevap

İlgili konular