logo标签列表

材料设计轻量级版 - 更改抽屉图标颜色

javascripthtmlcssfrontendmaterial-design-lite
6
我找不到一种方法来更改抽屉汉堡图标。让我们看看代码说了什么： 代码 
<!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>

输出结果
图标似乎是动态添加的，颜色设置为白色：
当我在我的Chromium控制台中更改其颜色时，一切都正常。但是如果我尝试使用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>

谢谢！♫♪ 我祝你圣诞快乐 ♫♪♫
我的建议是离开Material，改用FontAwesome。代码更少，没有JS，只有CSS，而且它可以正常工作... - junkfoodjunkie
2个回答
2

这份工作

    .material-icons {
  color: red !important;
}
1
欢迎来到StackOverflow！这个选择器并不是专门针对汉堡图标的，但似乎可以工作。下次您可以考虑使用实时演示来展示您的答案在上下文中的工作方式。 - GKFX
0

我已经将-tag从Material Icons添加到您的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>

1
我已经尝试过这个答案，但是在一个链接到Angular组件的CSS样式表中，其中包含头部部分。由于这个原因，样式没有应用到图标上，因为Angular组件仅将样式应用于与其链接的模板。谢谢您的回复，您向我展示了它在纯HTML / CSS中运行，并且正是因为这个原因我注意到我的错误与Angular有关。我学到了一些东西！ - lemour_a
感谢您的反馈！ - Michael B
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接