是否可以为fontawesome图标颜色着色？

Question

我可以更改fontcolor，但不能更改“填充”。我首先尝试设置背景颜色，但填充整个图标框区域。

例如，我有

<i class="icon-star-empty icon-large"></i>

但我希望它是黄色的。

编辑： 用例是我想要一个“最喜欢的”图标为灰色轮廓，点击后，轮廓变为橙色，填充为黄色。

Answer 1

Font-awesome附带了许多概述和填充icons。 star就是其中之一。

您可以使用四种不同的星形图标类：

class="icon-star"
class="icon-star-empty"
class="icon-star-half"
class="icon-star-half-empty"

如果你是一个玻璃半满的人，你也可以使用'icon-star-half-empty'的别名：

class="icon-star-half-full"

您可以为字体 - 真棒图标着色并使用不同的效果来实现您的目标：

<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>

使用以下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;
}

如果您不想使用icon-large，也可以替换/设置尺寸。

以上代码输出以下内容：

但是我已经在JSFiddle中添加了上面的代码和一些选项，你can look at here。

还可以使用css-transitions提供一种动画更改CSS属性的方法，而不是让更改立即生效或与javascript结合使用。

Answer 2

您只需要设置color: yellow即可。因为图标是一种字体，所以它们会以相同的方式将您设置的任何颜色设置为任何其他字体（文本）。

如果你想将整个星星填充为黄色，请尝试使用icon-star而不是icon-star-empty

你可以试试这个

-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;

将笔划（轮廓）添加到字体本身。我希望那就是你要找的东西。

并填写它只需使用正常的

color: yellow;

Answer 3

＆＃34; -webkit-text-stroke＆＃34;这是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;    
}

对我有用，这里是fiddle

感谢。

Answer 4

如果你来到这里就像我想要一个单独的“填充”颜色的图标而不是字体颜色（例如，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>

您可以使用常规的圆角正方形并将其堆叠在您想要显示的图标下。如果您希望它为白色，则可以指定fa-inverse，假设您的默认值为黑色。 More info here

Answer 5

除上述答案外，有时您想向字体/图标添加笔画/边框。在这种情况下，将显示以下内容。

至少在WebKit中。示例：

h1 {
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

或速记：

h1 {
  -webkit-text-stroke: 1px black;
}

该笔划在WebKit中有效，但在其他浏览器中消失了！另类？ 我们可以使用text-shadow属性并模拟笔划。

h1 {
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

我们使用四个阴影，每个阴影有1px的黑色偏移（不扩散），分别位于右上，左上，左下和右下。

唯一的保留对象是IE9及更低版本，当然您可以使用IE特定的CSS进行解释。

P.S。也供我自己参考。

来源：Link

Answer 6

如果使用reactjs并在组件下方

<i className="icon-star-empty icon-large" style={{color: "grey", fontSize: "70px"}}></i>

Answer 7

我最近使用非常简单的CSS做到了这一点，仅使用一个超棒的字体图标。这些图标呈现为SVG。

它是如何工作的，我使用的是实心/实心图标，但是将其变为白色并添加了黑色边框，使其显得空白。单击它后，我可以切换.fill类以将颜色更改为金色，使其变为实心。

HTML：

<i class="fas fa-star"></i>

CSS：

.fa-star {
    stroke: #000;
    stroke-width: 30px;
    color: white;
    cursor: pointer;
}

.fa-star.fill {
     color: #ffd700 /* gold */
}

使用jQuery进行切换的JS：

$('body').on('click', ".fa-star", function () {
     favorite(this);
});

function favorite(item) {
     $(item).toggleClass("fill");
}