38

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

例如，我有

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

但我希望它是黄色的。

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

4

7 回答 7

80

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 属性的更改进行动画处理的方法，而不是让更改立即生效，或者与结合使用。

于 2013-07-09T15:46:56.850 回答
11

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

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

你可以试试这个

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

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

并填充它只需使用正常的

color: yellow;
于 2013-07-09T05:15:12.620 回答
7

如果你像我一样来到这里，想要一种方法让图标有一个单独的“填充”颜色而不是字体颜色（例如，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假设您的默认值为黑色。更多信息在这里。

于 2016-01-05T22:51:06.880 回答
6

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

为我工作，这是小提琴

谢谢。

于 2015-07-21T20:54:46.437 回答
1

扩展到上述答案，有时您想为字体/图标添加笔触/边框。在这种情况下，呈现以下内容。

至少在 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 来解决这个问题。

PS 也供我自己参考。

来源：链接

于 2019-04-22T07:12:24.367 回答
0

如果您使用，reactjs并且在组件下

<i className="icon-star-empty icon-large" style={{color: "grey", fontSize: "70px"}}></i>
于 2019-07-16T09:23:46.863 回答
0

我最近用非常简单的 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");
}
于 2020-08-08T02:25:30.477 回答