如何更改Facebook字体图标的颜色？

Question

我想改变 Font Awesome Facebook 图标的颜色。如果我使用 background-color 来实现：

body {
  font-size: 5em;
  background: #555
}

.fa-facebook-square {
  color: blue;
  background-color: #fff;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-facebook-square"></i>

它在Facebook标志蓝色“背景”的边缘添加了白色，而我不需要这样做。

是否有一种简单的解决方案，只为图标中的“f”着色，以便边缘周围的颜色保持透明？

- sir-haver

Answer 1

该图标仅由'f'周围的部分组成，'f'本身和边缘部分是透明的。因此，您需要在'f'下面创建一个白色部分。

可以使用linear-gradient、background-size和background-position的组合来实现。通过渐变，您可以创建一个白色矩形，可以缩放和定位，以仅位于'f'下方。

通过使用相对单位（%），您的白色背景矩形会随着相应字体大小的缩放而缩放。

body {
  font-size: 5em;
  background: #000
}

.fa-facebook-square {
  color: #3b5998;
  background-image: linear-gradient( to bottom, transparent 20%, white 20%, white 93%, transparent 93% );
  background-size: 55%;
  background-position: 70% 0;
  background-repeat: no-repeat;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-facebook-square"></i>

- andreas

Answer 2

这是默认的图标显示效果： 如果您使用：

background-color: white !important;

然后你会得到这个：

如果你接着使用：

background-image: linear-gradient( to bottom, transparent 20%, white 20%, white 93%, transparent 93% );
background-size: 84%;
background-position: 60% 0;
background-repeat: no-repeat;

然后得到的结果是：

尝试使用background-size属性来适应您的图标。

- james ace

Answer 3

使用堆叠图标。

将白色文本的fab fa-facebook-f类与您所需的背景下的fa fa-square类堆叠。

参考：https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/stacking-icons

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<span class="fa-stack fa-2x">
    <i style="color: blue;" class="fas fa-square fa-stack-2x"></i>
    <i style="color: white;" class="fab fa-facebook-f fa-stack-1x"></i>
</span>

- Josh_damian

Answer 4

您可以使用此SVG，它不会创建这样的边缘。

body {
  background-color: black;
}

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 448 448" style="enable-background:new 0 0 448 448;" xml:space="preserve">
    <style type="text/css">
     .st0{fill:#FFFFFF;}
    </style>
    <rect x="125.2" y="39.5" class="st0" width="274" height="408.5"/>
    <path fill="blue" d="M448,24.7v398.5c0,13.7-11.1,24.7-24.7,24.7H309.1V274.5h58.2l8.7-67.6h-67v-43.2c0-19.6,5.4-32.9,33.5-32.9h35.8V70.3
     c-6.2-0.8-27.4-2.7-52.2-2.7c-51.6,0-87,31.5-87,89.4v49.9h-58.4v67.6h58.4V448H24.7C11.1,448,0,436.9,0,423.3V24.7
     C0,11.1,11.1,0,24.7,0h398.5C436.9,0,448,11.1,448,24.7z"/>
    </svg>

- Nitwel

---

这并没有使用 Font Awesome 图标。这个答案可能属于另一个问题，而不是这个问题。或者可以作为 CodePen 的评论。 - TylerH

Answer 5

它应该能够完成任务，至少在Angular + SVG组合中可以。 SCSS代码用于在悬停时更改fab fa-behance类图标的颜色。

&:hover {
    svg {
      &.fa-facebook-f {
        path {
          transition: 1s;
          fill: #3b5998;
        }
      }
    }
 }

- Daniel Danielecki

Answer 6

如果您不想要白色轮廓线，我会删除背景颜色标签。请查看这个fiddle。

<link rel="stylesheet" 

HTML：

href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<div>
<i class="fas fa-ambulance"></i>
</div>

JS：

.fa-ambulance {
  color: red;
  background-color: black;
  font-size:100px;
}

- Maxwell Omdal

---

谢谢您的回答，我忘记提到Facebook图标放置在一个灰色容器中，这就是为什么应用于图标的白色背景颜色会产生白边的原因。我确实需要这个背景，否则字母“f”会呈现灰色。 - sir-haver

也许解决方案是为Facebook图标制作一个白色容器？我只是希望有一个优雅的解决方案。 - sir-haver

@sir-haver，我误解了你的问题。Andreas的回答似乎是你要找的。 - Maxwell Omdal