如何在字体中调整两种颜色？
我想使用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
正如你所看到的，蓝色是如此广泛，以至于跨越了白色的边界。如何解决此问题？
回答 5
Stack Overflow用户
发布于 2015-08-23 08:56:28
您可以将多个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
Stack Overflow用户
发布于 2015-08-22 06:04:09
这是因为字体就是这样设置的。您可以使用FontAwesome拥有的另一种facebook字体<i class="fa fa-facebook'></i>，然后使用CSS对其进行处理，使其看起来类似。这里有一个小提琴的例子。http://jsfiddle.net/q1pL3bop/1/
Stack Overflow用户
发布于 2019-08-21 19:41:04
Font Awesome 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>https://stackoverflow.com/questions/32149647
复制相似问题
腾讯云开发者
