Css 有没有可能给fontawesome图标的颜色上色？

我可以改变颜色，但不能改变“填充”。我第一次尝试设置背景色，但它填充了整个图标框区域

例如，我有

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

但我希望它是黄色的

编辑：

---

用例是，我希望一个“收藏夹”图标的轮廓为灰色，单击后，轮廓变为橙色，填充为黄色。

您只需设置

颜色：黄色

。因为图标是一种字体，它们将以相同的方式采用您设置为任何其他字体（文本）的任何颜色

如果要将整个星形填充为黄色，请尝试图标星形而不是图标星形空

你可以试试这个

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

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

要填充它，只需使用普通的

color: yellow;

---

Font awesome同时提供了一些轮廓和填充是其中之一

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

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>

如果不想使用大图标，也可以替换/设置大小

上述代码输出以下内容：

但是我已经将上面的代码和其他一些选项放在了JSFIDLE中，您可以使用它

也可以使用提供CSS属性更改动画的方法，而不是使更改立即生效或与一起生效。

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

对我有用，这是

---

谢谢。

如果你像我一样来到这里，希望找到一种方法，让图标的“填充”颜色比字体颜色更独立（例如，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

，假设默认值为黑色

扩展到上述答案，有时您希望在字体/图标中添加笔划/边框。在这种情况下，将显示以下内容

至少在WebKit中是这样。例如：

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

或速记：

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

笔划在WebKit中工作，但在其他浏览器中消失！可供替代的 我们可以使用文本阴影属性并模拟笔划

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

我们使用四个阴影，每个1px的黑色偏移量没有扩散，每个阴影位于右上角、左上角、左下角和右下角

唯一的障碍是IE9和down，当然你可以使用特定于IE的CSS来解释

附言供我自己参考

---

来源：

如果使用，

reactjs

和组件下

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

---

最近，我使用非常简单的CSS，仅使用一个字体图标来实现这一点。这些图标呈现为SVG

它的工作原理是我使用实心/实心图标，但将其变为白色，并添加黑色边框以使其看起来是空的。单击后，我可以切换.fill类以将颜色更改为金色，使其成为实心

HTML:

使用jQuery切换的JS：

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

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

---

很好的回答，我不得不把它交给@nickhar，因为它包含了jsfiddle。谢谢你回来。@jqed不客气。除了描述之外，一个工作示例（您可以随意摆弄）通常值一千个单词或几段代码。请指出，使用

-webkit text stroke width

的最新选项仅适用于Chrome。已确认，笔划颜色在Firefox 44中不起作用。将笔划宽度和笔划颜色设置为黑色和白色可以有效地在任何背景下查看图标。如果您需要在用户图像上覆盖图标，这非常好。请更新，最新版本的font awesome不适用，它具有

.fa

类您现在可以使用font awesome 5和转换轻松地完成此操作。两颗星星在一起好的呼叫@Brynn！

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

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

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

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

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