如何在Materialise中更改颜色图标？

Question

我使用css框架Materialize.css 我不明白我的HTML图标中的过去颜色

<i class="large material-icons">note_add</i>

我试过了cyan darken-4

<i class="large material-icons cyan darken-4">note_add</i>

但没有成功，我需要改变颜色图标。 如何制作？

Answer 1

添加＆＃34;青色文字＆＃34; ＆安培; ＆＃34;文本变暗-4＆＃34;到了。

<i class="large material-icons cyan-text text-darken-4">note_add</i>

Answer 2

您可以通过在图标中添加一个类来实现此目的，如下所示 -

<i class="large material-icons icon-blue">note_add</i>

然后在CSS样式表中，您可以定义icon-blue类

的颜色

i.icon-blue {
    color: blue;
}

然后会更改您的图标颜色。希望这有帮助！

Answer 3

很简单，我会告诉你一个例子：

 <i class="material-icons large red-text">room</i>

只需在文字前输入名称（红色 - 文字）

Answer 4

我得到一个使用＆＃34;样式＆＃34;的例子。属性。

<pre></td><td class="col-sm-2"><i class="little material-icons" style="color:blue">search</i></pre>

Answer 5

根据 Materialize documentation，您可以访问其直接的CSS属性。

  
• .input-field输入[type = text]：焦点+标签或类似的
  
• 类或ID修饰符
  
• 使用 materialize's color palette

Answer 6

如果您想使用Jquery

• 这将更改所有材质图标的颜色

  

$(".material-icons").css("color", themeColor);

• 这将改变元素内的材质图标的颜色，例如输入字段

  

$(".input-field>.material-icons").css("color", themeColor);

现场演示

在Materialize CSS Change Theme Color上查看Hitesh Sahu（@hiteshsahu）的笔CodePen。