html - 如何在 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 图标堆叠在一起，并使用 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