Html 我可以更改 Font Awesome 的图标颜色吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14474452/
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
Can I change the color of Font Awesome's icon color?
提问by HUSTEN
I have to wrap my icon within an <a>tag for some reason.
Is there any possible way to change the color of a font-awesome icon to black?
or is it impossible as long as it wrapped within an <a>tag? Font awesome is supposed to be font not image, right?
<a>由于某种原因，我必须将我的图标包装在一个标签中。
有没有可能将字体真棒图标的颜色更改为黑色？
还是只要它包裹在<a>标签中就不可能？Font Awesome 应该是字体而不是图像，对吧？
<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
回答by Evan Hahn
This worked for me:
这对我有用：
.icon-cog {
color: black;
}
For versions of Font Awesome above 4.7.0, it looks this:
对于4.7.0以上的 Font Awesome 版本，它看起来像这样：
.fa-cog {
color: black;
}
回答by J.B.
HTML:
HTML：
<i class="icon-cog blackiconcolor">
css :
css :
.blackiconcolor {color:black;}
you can also add extra class to the button icon...
您还可以向按钮图标添加额外的类...
回答by dandrews
You can specify the color in the style attribute:
您可以在 style 属性中指定颜色：
<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>
回答by ChAnDu353
To change the font awesome icons color for your entire project use this in your css
要更改整个项目的字体真棒图标颜色，请在 css 中使用它
.fa {
color : red;
}
回答by Rahul Tathod
Try this:
尝试这个：
<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">
回答by Lazaros Papadopoulos
If you don't want to alter the CSS file, this is what works for me. In HTML, add style with color:
如果您不想更改 CSS 文件，这对我有用。在 HTML 中，添加带有颜色的样式：
<i class="fa fa-cog" style="color:#fff;"></i>
回答by Adrian Schmidt
To hit only cog-icons in that kind of button, you can give the button a class, and set the color for the icon only when inside the button.
要仅点击那种按钮中的齿轮图标，您可以为按钮指定一个类，并仅在按钮内部时设置图标的颜色。
HTML:
HTML：
<a class="my-nice-button" href="/users/edit">
<i class="icon-cog"></i>
Edit profile
</a>
CSS:
CSS：
.my-nice-button>i { color: black; }
This will make any icon that is a direct descendant of your button black.
这将使您的按钮的直接后代的任何图标变为黑色。
回答by Sategroup
With reference to @ClarkeyBoy answer, below code works fine, if using latest version of Font-Awesomeicons or if you using faclasses
参考@ClarkeyBoy 答案，如果使用最新版本的Font-Awesome图标或使用fa类，下面的代码可以正常工作
.fa.icon-white {
color: white;
}
And, then add icon-whiteto existing class
然后添加icon-white到现有类
回答by Stanjhae
.fa-search{
color:#fff;
}
you write that code in css and it would change the color to white or any color you want, you specify it
您在 css 中编写该代码，它会将颜色更改为白色或您想要的任何颜色，您可以指定它
回答by Qaan Lee Hoong
just give and text style whatever you want like :D HTML:
只需提供您想要的文本样式即可：D HTML：
<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
<span style="color:black;">Text Name</span>
</a>
