Replacing Facebook social media logo in team widget

Per the title, I am looking for a CSS snippet which will allow me to replacing the Facebook social media logo in team widget with another icon, e.g. one of these.

Example screenshot of what I would like to change is attached. I would like to change the green “F” logo (for Facebook) to a “W” symbol (for website).

Hi,

Go to Appearance -> Customize -> Additional CSS and add this CSS Snippet in it,

.person-content-social .fa.fa-facebook::before { content: '\f266’; }

That is Wikipedia Icon, it has a ‘w’ I don’t find any other W in the font-awesome icons library if you found you can replace the Unicode f266. Or you can even simply put content: ‘w’;

Let us know,

Thanks,
laranz.

Thank you, this is precisely what I wanted. Although, I had to use double quotes “” around \f266 (although I used “w”, actually) and put the curly bracket on the next line per convention.

I notice that the alt-text (text revealed when you hover your mouse over the button) still read “Facebook”. I tried:

.person-content-social .fa.fa-facebook::before { alt-text: "Website"; }

But this seemed to have no effect. Could you suggest a solution to this?

Many thanks again.

Hi,

One easy way is to translate the plugin “illdy-companion”, How to translate a WordPress theme including Shapely & Illdy - Colorlib use this and change just the Facebook word to your desired one. :slight_smile:

If the article is a bit tough for you, you can easily use this plugin: Loco Translate – WordPress plugin | WordPress.org it is like POEdit in your WordPress admin itself.

Let us know,

Thanks,
laranz.

Many thanks - I will try this.

Hi,

Sure, keep us updated, in case you need any help.

Let us know,

Thanks,
laranz.