能否给fontawesome图标着色？

Question

我可以改变字体颜色，但不能改变“填充”颜色。我最初尝试设置背景颜色，但那会填充整个图标框区域。

例如，我有以下代码：

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

但我希望它是黄色的。

编辑： 我的使用场景是希望一个“收藏”图标的轮廓为灰色，在点击后，轮廓变为橙色，填充为黄色。

- jqed

---

你现在可以轻松地使用Font Awesome 5和transforms来完成这个任务。两个星号叠在一起。 - Samantha Adrichem

最新版本（5+）的Fontawesome已发布星形图标的实心和空心版本。实心版本将显示填充的星形，而空心版本将显示空星形。 <i class="fa-regular fa-star"></i> <i class="fa-solid fa-star"></i> - Aleem

Answer 1

Font-awesome提供了许多带边框或填充的图标，星形图标就是其中之一。

你可以使用四个不同的星形图标类：

class="icon-star"
class="icon-star-empty"
class="icon-star-half"
class="icon-star-half-empty"

如果您是个乐观的人，您也可以使用“icon-star-half-empty”代替“glass-half-full”。

class="icon-star-half-full"

你可以对font-awesome图标进行着色，并使用不同的特效来实现你想要的效果：

<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转换，它提供了一种动画CSS属性更改的方式，而不是立即生效或与JavaScript结合使用。

- nickhar

---

@jqed 不用谢。一个可操作的示例（您可以随意尝试）以及描述通常比几行代码值得一千个字。 - nickhar

只是想指出，使用“-webkit-text-stroke-width”选项的最新版本仅适用于Chrome浏览器。 - Alvaro

确认，在Firefox 44中描边颜色无效。 - bart

将黑色的描边宽度和描边颜色与白色配合使用，可以使图标在任何背景上都能清晰可见。如果您需要将图标叠加在用户图像上，这非常有用。 - Jon Dosmann

最新版本（5+）的Fontawesome已发布星形图标的实心和空心版本。实心版本将显示填充的星形，而空心版本将显示空星形。 <i class="fa-regular fa-star"></i> <i class="fa-solid fa-star"></i> - Aleem

Answer 2

你所需要做的就是设置color: yellow。因为这些图标是字体，它们会以与其他字体（文本）相同的方式呈现任何你设置的颜色。

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

你可以试一试这个。

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

我希望你需要的是给字体本身添加描边（轮廓线）。

而要填充它，只需使用普通的方式即可。

color: yellow;

- Lucas Lim

---

好的回答，不过我必须把它给@nickhar，因为他包含了jsfiddle。感谢你的回复。 - jqed

Answer 3

如果你像我一样想要为图标和字体颜色分别设置不同的“填充”颜色（例如，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，假设您的默认颜色是黑色。 此处有更多信息。

- Brynn Bateman

---

好的呼叫 @Brynn！ - nickhar

Answer 4

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

对我来说很有效，这是演示

谢谢。

- Milo Mora

---

请更新代码，因为最新版本的 Font Awesome 已经使用了 .fa 类，旧代码已经无法正常工作。 - Shaiju T

Answer 5

扩展以上答案，有时您想要为字体/图标添加描边/边框。在这种情况下，可以使用以下方法。

至少在Webkit中，示例如下：

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

或者简写：

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

在其他浏览器中描边无法显示，有什么替代方法吗？我们可以使用text-shadow属性来模拟描边。

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

我们使用四个阴影，每个阴影都是黑色的1像素偏移量，没有扩散效果，分别放置在右上角、左上角、左下角和右下角。

唯一需要注意的是IE9及以下版本，当然你可以使用IE特定的CSS来解决。

附：供我自己参考。

来源：链接。

- Abdul Rehman

Answer 6

我最近使用非常简单的CSS完成了这个操作，只使用了一个font-awesome图标。这些图标以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");
}

- Ben

Answer 7

如果你使用 ReactJS 和组件

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

- Prashanth Sams