CSS 是否可以为 fontawesome 图标颜色着色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17540383/
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
Is it possible to color the fontawesome icon colors?
提问by jqed
I can change fontcolor, but not the "fill". I first tried setting background-color, but that fills the whole icon box area.
我可以更改字体颜色，但不能更改“填充”。我首先尝试设置背景颜色，但这会填满整个图标框区域。
For example, I have
例如，我有
<i class="icon-star-empty icon-large"></i>
but I want it to be yellow.
但我希望它是黄色的。
Edit: The use case is that I want a "favorite" icon to be outline of grey, on click, the outline becomes orange, fill to yellow.
编辑：用例是我希望“最喜欢的”图标为灰色轮廓，单击时，轮廓变为橙色，填充为黄色。
回答by nickhar
Font-awesome comes with a number of both outlined and filled icons. The staris one of them.
Font-awesome 带有许多轮廓和填充图标。该星就是其中之一。
There are four different star icon classes that you can use:
您可以使用四种不同的星形图标类：
class="icon-star"
class="icon-star-empty"
class="icon-star-half"
class="icon-star-half-empty"
If you're a glass-half-full type of person, you can also use the alias for 'icon-star-half-empty':
如果您是玻璃杯半满类型的人，您还可以使用“icon-star-half-empty”的别名：
class="icon-star-half-full"
You can colour the font-awesome icons and use different effects to achieve what you're looking for:
您可以为字体很棒的图标着色并使用不同的效果来实现您想要的效果：
<i class="icon-star-empty icon-large icon-a"></i><br><br>
<i class="icon-star-empty icon-large icon-b"></i><br><br>
<i class="icon-star icon-large icon-c"></i> or <i class="icon-star icon-large icon-d"></i>
Where the following CSS is used (rather than using inline styles):
使用以下 CSS 的地方（而不是使用内联样式）：
.icon-a {
color: #888;
}
.icon-b {
color: orange;
}
.icon-c {
color: yellow;
}
.icon-d {
color: yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
}
You can also substitute/set the size too, if you don't want to use icon-large.
如果您不想使用icon-large.
The above code outputs the following:
上面的代码输出如下：
but I've put the above code and a few more options in a JSFiddle, which you can look at here.
但我已将上述代码和更多选项放在 JSFiddle 中，您可以在此处查看。
It's also possible to use css-transitionsthat provides a way to animate changes to CSS properties instead of having the changes take effect instantly and or in combination with javascript.
也可以使用css-transitions提供一种方式来对 CSS 属性的更改进行动画处理，而不是让更改立即生效或与javascript结合使用。
回答by Lucas Lim
All you need is to set color: yellow. Because the icons are a font, they will take whatever colour you'd set to any other font (text) in the same way.
您只需要设置color: yellow. 因为图标是一种字体，所以它们将以相同的方式采用您为任何其他字体（文本）设置的任何颜色。
if you want to fill the whole star as yellow, try icon-star instead of icon-star-empty
如果要将整颗星填充为黄色，请尝试使用 icon-star 而不是 icon-star-empty
you can try this
你可以试试这个
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
to add stroke (outline) to the font itself. I hope thats what you are looking for.
将笔画（轮廓）添加到字体本身。我希望这就是你正在寻找的。
and to fill it just use the normal
并填充它只需使用正常
color: yellow;
回答by Brynn Bateman
If you came here like I did wanting a way to have a separate "fill" color for an icon than the font color (for example, the "F" of the Facebook icon is transparent and shows whatever the background is below it), here's your answer:
如果你像我一样来到这里，想要一种方法来为图标设置单独的“填充”颜色而不是字体颜色（例如，Facebook 图标的“F”是透明的并显示其下方的任何背景），这里是你的答案：
<p class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x fa-2x fa-inverse"></i>
<i class="fa fa-facebook-square fa-stack-2x fa-2x"></i>
</p>
You take the regular rounded square and stack it under the icon you want visible. If you want it to be white, you can specify fa-inverseassuming your default is black. More info here.
您将常规的圆角正方形堆叠在您想要可见的图标下方。如果您希望它是白色，您可以指定fa-inverse假设您的默认值是黑色。更多信息在这里。
回答by Milo Mora
The problem with "-webkit-text-stroke" is that is not fully supported by FF and IE, so what I do in this case is to use the half star in a pseudo class inside of the normal star, something like this:
“-webkit-text-stroke”的问题在于FF和IE不完全支持，所以在这种情况下我所做的是在普通星内部的伪类中使用半星，如下所示：
.icon-star.red-border {
position: relative;
color: blue;
font-size: 24px;
}
.icon-star.red-border:after {
content: "\f006";
color: red;
position: absolute;
left: 0;
}
And works for me, here is the fiddle
Thanks.
谢谢。
回答by Bsienn
Extending to the above answers, sometimes you want to add stroke/border to the font/icon. In that case the following is presented.
扩展到上述答案，有时您想为字体/图标添加笔划/边框。在这种情况下，将介绍以下内容。
At least in WebKit. Example:
至少在 WebKit 中。例子：
h1 {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
Or shorthand:
或简写：
h1 {
-webkit-text-stroke: 1px black;
}
The stroke works in WebKit but disappears in other browsers! Alternative? We can use the text-shadow property and simulate a stroke.
笔画在 WebKit 中有效，但在其他浏览器中消失了！选择？我们可以使用 text-shadow 属性并模拟笔画。
h1 {
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
We use four shadows, each 1px offset of black with no spread, one each to the top right, top left, bottom left, and bottom right.
我们使用了四个阴影，每个 1px 的黑色偏移，没有扩散，一个到右上角、左上角、左下角和右下角。
The only holdout would be IE9 and down, which of course you can use IE specific CSS to account for.
唯一的坚持是 IE9 及以下，当然你可以使用 IE 特定的 CSS 来解决。
P.S. For my own reference as well.
PS也供我自己参考。
Source: Link
来源：链接
回答by Prashanth Sams
if you use, reactjsand under components
如果您使用，reactjs并且在组件下
<i className="icon-star-empty icon-large" style={{color: "grey", fontSize: "70px"}}></i>
