CSS 如何在Materialize中改变图标颜色

在本文中，我们将介绍如何使用CSS来改变Materialize中的图标颜色。

阅读更多：CSS 教程

1. 使用CSS选择器改变图标颜色

要改变Materialize中图标的颜色，我们可以使用CSS选择器来选中特定的图标，并为其指定颜色属性。

首先，我们需要在HTML文档中引入Materialize的样式表和图标字体文件。在标签中添加以下代码：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

接下来，我们可以使用CSS选择器根据图标的类名或父元素对图标进行选择并修改其颜色。例如，如果我们希望将菜单图标的颜色更改为红色，可以在CSS文件中添加以下代码：

.icon-menu {
  color: red;
}

这样，所有具有类名为”icon-menu”的图标都将呈现红色。

2. 使用颜色类改变图标颜色

Materialize提供了一组预定义的颜色类，可以方便地为图标指定颜色。这些颜色类基于Material Design规范，可以在不使用自定义CSS的情况下轻松更改图标的颜色。

要使用颜色类改变图标颜色，我们只需为图标的父元素添加相应的颜色类即可。例如，如果我们想将一个菜单图标设置为蓝色，可以将其包装在一个带有”blue-text”类的元素中：

<span class="blue-text">
  <i class="material-icons">menu</i>
</span>

通过添加”blue-text”类，图标的颜色将自动更改为蓝色。

3. 使用行内样式改变图标颜色

除了使用CSS选择器和颜色类，我们还可以使用行内样式直接为图标指定颜色。这种方法适用于只想更改特定图标的颜色，而不影响其他图标的情况。

要使用行内样式改变图标颜色，我们可以在标签中使用”style”属性，并为其指定”color”属性。例如，如果我们想将一个菜单图标的颜色更改为绿色，可以添加以下代码：

<i class="material-icons" style="color: green;">menu</i>

.icon-menu {
  filter: grayscale(100%);
}