如何更改 Facebook Font Awesome 图标的颜色？

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

Kindly update your question to not only be for facebook icon but all font-awesome Icons.

ie

How to style the background for font awesome icons

This was what I had before

Then I used

background-color: white !important;

I got

I then used

    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;

And the results

Expreriment with the background size to fit your Icons.

Happy coding 🙂

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 fab fa-behance 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;
}