如何在Font Awesome中调整两种颜色？

Question

我想使用Font Awesome的Facebook图标，但我很难正确调整颜色。我的网页背景颜色是灰色的，我希望有一个混合了白色和白色的图标。蓝色，但颜色范围无法正确调整。以下是我的HTML代码：

    <a class="list-group-item"  href="https://www.facebook.com/pages/Scientific-Editing-and-Proofreading/726988900763622" target="_blank"><i class="fa fa fa-facebook-square fa-5x fa-cog-fa"></i></a>

以下是我的css：

.fa-cog-fa {
color: white;
background-color:blue;
}

您可以在以下链接中看到最终结果： this is how my code at the end appear

如您所见，蓝色是如此程度，以便跨越白色的边界。我该如何解决这个问题？

Answer 1

那是因为它是字体的设置方式。您可以使用FontAwesome拥有的其他facebook字体<i class="fa fa-facebook'></i>，然后使用CSS操作它以查找类似的内容。这是一个小提琴的例子。 http://jsfiddle.net/q1pL3bop/1/

Answer 2

您可以将多个FontAwesome图标堆叠在一起，并使用CSS添加一些额外的格式。 fa-square和fa-facebook可以很好地结合在一起，但你必须摆弄对齐和定位以使其恰到好处。

堆栈的基本标记：

<span class="fa-stack fa-5x">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>

文档：http://fortawesome.github.io/Font-Awesome/examples/

用颜色进行演示，粗略对齐：http://codepen.io/blindingstars/pen/WvVevE

Answer 3

你不能，轻松。 Fontawesome（或任何字体）只有两种“颜色”：前景色和透明色。使用具有多种颜色的字体需要某种覆盖技术（即，将两个图标放在彼此之上），这可能很难做到正确。

如果你想要颜色，坚持使用SVG，甚至是PNG。

Answer 4

我建议使用Font Awesome的SVG来获得您正在寻找的效果。使用＆＃34;字体＆＃34;伪元素:: before延伸到元素本身之外。使用SVG时，它非常适合元素。

您可以在https://css-tricks.com/icon-fonts-vs-svg/

找到更多相关信息

Answer 5

Font Awesome Pro 5现在具有DUOTONES，这将始终是在图标中使用拖曳颜色的首选方法。

官方资源链接：https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons

<div class="fa-3x">
  <i class="fad fa-bus-alt" style="--fa-primary-color: gold;"></i>  <!-- primary layer color defined -->
  <i class="fad fa-bus-alt" style="--fa-primary-color: orangered;"></i> <!-- primary layer color defined -->
  <i class="fad fa-fill-drip" style="--fa-secondary-color: limegreen;"></i>  <!-- secondary layer color defined -->
  <i class="fad fa-fill-drip" style="--fa-secondary-color: rebeccapurple;"></i> <!-- secondary layer color defined -->
  <i class="fad fa-battery-full" style="--fa-primary-color: limegreen; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
  <i class="fad fa-battery-quarter" style="--fa-primary-color: orange; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
</div>