Making the 'F' in the FB Social Icon white

Dear support,

I don’t really like the FB logo on my site being transparent, is there a way to make it white? I tried to use background-color: #fff, but than a whole square behind the logo becomes white.

I’m curious if you guys know a way to do this.

Thanks in advance!

Best,
Maarten

Hello there,

Please try this code:

    .social-widget a[href*="facebook.com"]:before, 
    .social-area a[href*="facebook.com"]:before {
      color: #fff;
    } 

Regards,
Kharis

Dear Kharis,

This makes the FB logo itself white. The thing is, I want the FB logo itself blue as it is now, but only the ‘f’ that is within the logo (which is now transparent) I want to be white. Is this possible, maybe by uploading a totally new FB icon picture in a certain way?

Hope to hear from you soon.

Best,
Maarten

Dear Maarten,

Please try this code:

    .social-widget a[href*="facebook.com"]:before, 
    .social-area a[href*="facebook.com"]:before {
      content: '\f09a';
      color: #fff;
    }  

Regards,
Kharis

Dear Kharis,

I tried this code and now only the ‘f’ is left, in white. Ideally I want the part of the logo outside the ‘f’ also visible, but in blue. Just like in the original Facebook logo. Maybe I should have said that before to make it more clear.

Would be really great if you could help me this last time!

Kind regards,
Maarten