Using Facebook icon in Brand Header

AI-generated summary

Using Facebook icon in Brand Header

s्मiley pants707 is experiencing an issue with a Facebook icon not displaying in the header of their community site, despite the link working correctly. jtbayly suggests the icon might be invisible due to a black icon on a black background, and recommends checking with Dev tools to ensure the icon is present and the color is being applied correctly.

vinothkannans provides a solution, referencing the Discourse GitHub repository. They explain that for “facebook” and “facebook-f” icons, adding “facebook-f” to the custom font awesome icons setting is necessary. smiley pants707 confirms that this solution worked, resolving the issue.

Hey there, so I can’t figure out what’s wrong here:

I have this FB icon typed in correctly,

But it is invisible in the header:

The invisible icon takes me to the correct FB page if I click on it in the header, but the icon simply isn’t visible.

Any thoughts?

Thought: black icon with transparent surround over a black background perhaps?

I changed the color value of the icons in this component to $tertiary, so it matches each individual theme.

The Instagram icon is perfectly fine, and the FB icon link works perfectly fine, it just isn’t visible.

Hmmm. It still seems like it must be there though. Have you checked with Dev tools to see if it is there? And while you’re at it check the icon color is correctly being applied? Perhaps the FB icon is being overridden somehow.

Can you share a link to the community site?

My Facebook icon setting looks a bit different:

facebook-f,https://www.facebook.com/GlobalNamati

In case of “facebook” & “facebook-f” icons you should add “facebook-f” into the custom font awesome icons setting.

Hey, this worked like a charm! Thank you so much @vinothkannans! This really had me puzzled.