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

Question

我可以改变fontcolor,但不能改变"填充".我首先尝试设置背景颜色,但填充整个图标框区域.

例如,我有

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

但我希望它是黄色的.

编辑:用例是我想要一个"最喜欢的"图标为灰色轮廓,点击,轮廓变为橙色,填充为黄色.

Answer 1

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>

使用以下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中,你可以在这里查看.

也可以使用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

"-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;    
}

对我有用,这里是小提琴

谢谢.

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假设您的默认值为黑色.更多信息在这里.