Some Font Awesome icons are not visible

Created on 24 June 2021, over 3 years ago

Updated 10 December 2023, about 1 year ago

Problem/Motivation

Some Font Awesome icons are not visible and replaced by squares/nothing at all. This is not a browser issue, as suggested on various forums, because it happens on Firefox, Edge, Opera, etc.

Steps to reproduce

Activate the Social Media Links Block in one of your website's regions. Add some links to "brand" social media (such as Facebook, Twitter) and "non brand" media (such as your website, email, or RSS feed). The "brand" media icons (which are the most frequently used) will not appear.

This is weird, because the very same module works fine on another account of the same host, on Drupal 9.2.0.

Proposed resolution

This is a css class problem. You can temporarily fiddle with the code below to activate the "brand" links (replace fa by fab). However, this will make the "non brand" links disappear:

/modules/social_media_links/src/Plugin/SocialMediaLinks/Iconset/FontAwesome.php

'#markup' => "<span class='fab fa-$icon_name fa-$style'></span>",

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report

Status

Active

Version

2.8

Component

Code

Created by

🇨🇦Canada mediameriquat

Live updates comments and jobs are added and updated live.

font awesome icon

Incomplete comments

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment over 1 year ago →
🇺🇸United States SocialNicheGuru
I had to use this module in order for the fonts to show up - https://www.drupal.org/project/fontawesome →
Comment over 1 year ago →
🇿🇦South Africa epicure.club
Had the same same problem on https://epicure.club
Surprised that the module does not require activation of https://www.drupal.org/project/fontawesome →
Comment about 1 year ago →
🇨🇦Canada mediameriquat
On Drupal 10, I solved all my icon visibility problems by activating the Font Awesome Icons → module.

In order to have up-to-date Drupal and X logos, choose the latest external library:
https://use.fontawesome.com/releases/v6.5.1/js/all.js

If you want to replace Twitter by X, you must also look at this issue ✨ Replace Twitter with X RTBC and apply patch #3

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024