How do I change the color of the Facebook Font Awesome icon?

Question

I would like to change the color of the Font Awesome Facebook icon. If I do it with 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>

It adds white around the edges of the blue 'background' of the Facebook logo, which I don't want.

Is there a simple solution to color only the "f" in the icon so that the color around the edges stays transparent?

Answer 1

The icon only consists of the part around the 'f', the 'f' itself and the part around the edges are transparent. Therefore you have to create a white part only under the 'f'.

It's possible with a combination of a linear-gradient, background-size and background-position. With the gradient you create a white rectangle, that you can scale and position to only lay under the 'f'.

By using a relative unit (%), your white background rectangle scales with the corresponding font size.

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>

Answer 2

Here are the basic icon default display outcomes:

If you use:

background-color: white !important;

Then you get this:

If you then use:

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;

Then the result is:

Experiment with the background-size to fit your icons.

Answer 3

Use stacked icons.

Stack the fab fa-facebook-f classes with white text over the fa fa-square classes with your desired background.

Re: 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>