머티리얼 디자인 라이트 - 서랍장 아이콘 색상 변경

서랍 햄버거 아이콘을 변경하는 방법을 찾을 수 없습니다. 하자 이야기하고있는 코드 :머티리얼 디자인 라이트 - 서랍장 아이콘 색상 변경

하는 코드

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

는

<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

나는 물질 아이콘에서 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와 함께 작동한다는 것을 보여 주었고, 내 실수가 각과 관련되어 있음을 알았 기 때문에 감사합니다. 나는 뭔가를 배웠다! –

의견을 보내 주셔서 감사합니다. –

머티리얼 디자인 라이트 - 서랍장 아이콘 색상 변경

답변

관련 문제