материал дизайн lite - замена ящик значок цвет

Я не могу найти способ изменить значок гамбургера ящика. Пусть это код делает разговор:материал дизайн lite - замена ящик значок цвет

КОД

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

значок, кажется, добавляется динамически потом с цветом, установленным на белом:

browser generated code

Когда я меняю свой цвет с моей консоли хром, все в порядке.
Но если я попробовать использовать класс CSS не работает:

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

МОЙ ВОПРОС

У меня есть какие-либо другие решения, чем изменить цвет динамически через DOM или непосредственно баловаться с материалом .min.js?

(Не успешно изменить цвет не используя JavaScript ни)

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

Спасибо! ♫ ♪ Желаю вам веселого Рождества ♫ ♪ ♫

источник

2016-12-23 lemour_a

Мое предложение было бы уйти от материала, и вместо этого использовать FontAwesome. Меньше кода, нет JS, просто CSS, и он просто работает ... – junkfoodjunkie

Я добавил i -tag из значков материалов в ваш CSS. Это работает нормально. Смотрите фрагмент:

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

источник

2016-12-23 14:59:23

Я уже пробовал этот ответ, но в CSS-таблице стилей, связанной с угловым компонентом, где находится часть заголовка. Стиль не был применен к значкам, из-за этого угловой компонент применяет стиль только к связанному с ним шаблону. Спасибо за ваш ответ, вы показали мне, что он работает с vanillia html/css, и благодаря этому я заметил, что моя ошибка была связана с угловой. Я что-то узнал! –

Благодарим вас за отзыв! –

материал дизайн lite - замена ящик значок цвет

ответ

Смежные вопросы