我可以改变颜色，但不能改变“填充”。我第一次尝试设置背景色，但它填充了整个图标框区域
例如，我有
<；i class=“icon star empty icon large”></i>；
但我希望它是黄色的
编辑：
使用案例是，我希望一个“最喜欢的”图标是灰色的轮廓，点击后，轮廓变成橙色，填充为黄色
Font awesome附带了许多轮廓图标和填充图标那颗星就是其中之一
您可以使用四种不同的星形图标类：
class=“图标星”
class=“图标星空”
class=“icon star half”
class=“图标星半空”
如果你是半杯半满的人，你也可以使用“icon star half empty”的别名：
class=“图标星半满”
您可以为字体图标上色，并使用不同的效果来实现所需的效果：
<；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>；或<；i class=“icon star icon icon large icon-d”></i>；
使用以下CSS的位置（而不是使用内联样式）：
.icon-a{
颜色：#888；
}
.icon-b{
颜色：橙色；
}
.icon-c{
颜色：黄色；
}
.icon-d{
颜色：黄色；
-webkit文本笔划宽度：1px；
-webkit文本笔划颜色：橙色；
}
如果不想使用大图标，也可以替换/设置大小
上述代码输出以下内容：
但是我已经将上面的代码和其他一些选项放在JSFIDLE中，您可以在这里查看
也可以使用css转换，它提供了一种方法来设置css属性更改的动画，而不是让更改立即生效或与javascript结合使用