如何改变字体图标一部分的颜色?

Question

我正在使用fa fa signs实现upvote按钮，我试图为up vote button的背景上色，但颜色显示在sign之外(我认为是图标的填充)，我试图隐藏外层填充。所以颜色只会在upvote符号

里面

<link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />
<i  class="fal voteup fa-sort-up fa-4x"></i>

.voteup {
background-color : red;
}

<link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />
<i  class="fal voteup fa-sort-up fa-4x"></i>

我也试过添加padding: none;，但它仍然显示。

任何帮助都将非常感激。

Answer 1

如果你想保持黑色的轮廓，你可以使用两个图标(实体+规则)在彼此的顶部:

#outline {
position: absolute;
z-index: 2;
}
#background {
color: red;
position: relative;
z-index: 1;
}

<link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />
<i  class="fal voteup fa-sort-up fa-4x" id="outline"></i>
<i  class="fas voteup fa-sort-up fa-4x" id="background"></i>

注意HTML元素和z-index的顺序。

Answer 2

你不能在字体上这样做，不幸的是-标准字体文件不支持多色字体。(有一种新的格式可以这样做，但它没有得到广泛支持，而且Fontawesome在任何情况下都无法以这种方式使用。)

如果你想让箭头的外边框是一种颜色，而填充是另一种颜色，你必须使用图像。SVG可能是最好的(因为矢量图形可以缩放)，您可以将Fontawesome符号下载为SVG文件。然后你可以打开像Inkscape这样的图形包中的箭头，并添加自定义填充。

如果你只想要一个实心箭头，你可以使用Fontawesome实心箭头。要做到这一点，将fal类替换为fas。

Answer 3

您可以通过CSS应用填充图标字符的属性。这样做的好处是不需要额外的标记。

.voteup {
position: relative; /* allow absolute positioning of children */
}
.voteup:after {
content: "f0de"; /* set the character code */
font-weight: 900; /* set the character variant */
color: red;
position: absolute; /* position with respect to the parent */
left: 0;
z-index: -1; /* since :before is in use, we'll use this and lay it behind */
}

<link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />
<i class="fal voteup fa-sort-up fa-4x"></i>