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>

Answer 4

You can use this SVG instead which creates no such edges.

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>

Answer 5

It should do the job, at least in Angular + SVG combination it does. SCSS code with changing color on hover for the fab fa-behance class icon.

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

Answer 6

If you do not want the white outline, I would remove the background-color tag. Check out this 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;
}