是否可以为 fontawesome 图标着色？

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

例如，我有

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

但我希望它是黄色的。

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

Font-awesome 带有一些轮廓和填充的字体icons http://fortawesome.github.io/Font-Awesome/icons/. The star http://fortawesome.github.io/Font-Awesome/icon/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 中，您可以可以看这里 http://jsfiddle.net/wbxhZ/.

也可以使用CSS 过渡 /questions/tagged/css-transitions它提供了一种对 CSS 属性进行动画更改的方法，而不是让更改立即生效和/或与javascript /questions/tagged/javascript.