材料设计精简版 - 更改抽屉图标颜色
lem*_*r_a 5 html javascript frontend css3 material-design-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>
输出
图标似乎随后动态添加,颜色设置为白色:
当我从我的铬控制台改变颜色时,一切都很好.
但是如果我尝试使用css类它不起作用:
.mdl-layout__header .mdl-layout__drawer-button {
color: #000 !important;
}
我的问题
除了通过DOM动态更改颜色或直接搞乱material.min.js,我还有其他解决方案吗？
(没有使用javascript成功更改颜色)
<script type="text/javascript">
document.querySelector(".mdl-layout__header .mdl-layout__drawer-button").style.color = "red";
</script>
谢谢 !♫♪我祝你圣诞快乐♫♪♫
我已将i材质图标中的 - 标签添加到您的 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>