CSS 如何在 Materialise 中更改颜色图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35961565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change color icon in Materialize?
提问by HeartOfprogrammer
I use css framework Materialize.css I don't understand where past color in my HTML icon
我使用 css 框架 Materialize.css 我不明白我的 HTML 图标中过去的颜色在哪里
<i class="large material-icons">note_add</i>
I have tried cyan darken-4
我试过了 cyan darken-4
<i class="large material-icons cyan darken-4">note_add</i>
But nothing succeeded, I need exactly change color icon. How to make it?
但没有成功，我需要完全改变颜色图标。如何制作？
采纳答案by Shekhar Chikara
You can do this by adding a class to your icon like below-
你可以通过向你的图标添加一个类来做到这一点，如下所示 -
<i class="large material-icons icon-blue">note_add</i>
And then in your CSS stylesheet, you can define the color for the icon-blueclass
然后在你的 CSS 样式表中，你可以定义icon-blue类的颜色
i.icon-blue {
color: blue;
}
Your icon color will then be changed. Hope this helps!
您的图标颜色将随之改变。希望这可以帮助！
回答by Christopher
Add the class of "cyan-text" & "text-darken-4" to the .
将“青色文本”和“文本变暗4”类添加到 .
<i class="large material-icons cyan-text text-darken-4">note_add</i>
回答by Luis Gerardo López Salazar
It's easy, I'll show you an example:
很简单，我举个例子：
<i class="material-icons large red-text">room</i>
Just enter the name before the text (red-text)
只需在文本前输入名称（红色 -文本）
回答by Nick Cuevas
I got an example with using the "style" attribute.
我得到了一个使用“style”属性的例子。
<pre></td><td class="col-sm-2"><i class="little material-icons" style="color:blue">search</i></pre>
回答by Ivens Applyrs
According to Materialize documentationyou can access their direct css attributes.
根据Materialize 文档，您可以访问它们的直接 css 属性。
- .input-field input[type=text]:focus + label or similar
- Class or ID modifier
- Using materialize's color palette
- .input-field input[type=text]:focus + label 或类似
- 类或 ID 修饰符
- 使用 materialize 的调色板
回答by Hitesh Sahu
If you want to use Jquery
如果你想使用 Jquery
- This will change color of all the material icons
- 这将改变所有材质图标的颜色
$(".material-icons").css("color", themeColor);
$(".material-icons").css("color", themeColor);
- This will change color of the material icons inside an element eg input field
- 这将改变元素内材料图标的颜色，例如输入字段
$(".input-field>.material-icons").css("color", themeColor);
$(".input-field>.material-icons").css("color", themeColor);
Live Demo
现场演示
看笔 Materialize CSS Change Theme ColorMaterialise CSS Change Theme Colorby Hitesh Sahu (@hiteshsahu@hiteshsahu) 上CodePen代码笔。