Contrib.social

FA v6 compatibility, some "fab" icons displaying as animated question marks (as if missing)

Open on Drupal.org →
Created on 3 November 2023, about 1 year ago
Updated 8 November 2023, about 1 year ago

Problem/Motivation

Some icons are displaying as animated question marks, as if they're missing. Seems to affect x-twitter, blogger, and threads, while not affecting twitter, facebook, youtube, linkedin, flickr, instagram, pinterest, or snapchat (haven't tested others). As far as I know, the non-working icons are all "free" too (at least in FA v6).

The HTML rendered for these is will be something like <span aria-hidden="true" class="linkicon__icon icon fa fa-x-twitter"></span> (or <span aria-hidden="true" class="linkicon__icon icon fa fab fa-x-twitter"></span> when trying to add that additional class), basically the same as the working ones.

This is converted in the case of a non-working one to something like:

<svg aria-hidden="true" class="svg-inline--fa fa-x-twitter linkicon__icon icon" focusable="false" data-prefix="fas" data-icon="x-twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">...</svg>

But in the case of a working one, it will instead be like:

<svg aria-hidden="true" class="svg-inline--fa fa-twitter linkicon__icon icon" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">...</svg>

I was finding that if I use my browser inspector to edit the non-working one's data-prefix="fas" to data-prefix="fab", the icon would subsequently work correctly.

Steps to reproduce

  • Drupal FontAwesome module specs (assuming some of these are relevant):
  • Field formatter has just fa as the "Icon prefix class". Doesn't seem to matter if I add fab or fa-brands (or both) as "Additional icon classes". Results are the same.

Proposed resolution

I found the non-working icons to work if I used a custom template_preprocess_linkicon_item() to remove just the fa class from $variables['icon']['#markup'] (e.g. str_replace(' fa ', ' ', $markup); ... as long as I additionally had one of fab or fa-brands also in place!), or even to invert the order of some fa classes (e.g. str_replace('fa-brands fa', 'fa fa-brands', $markup);). I don't know if this means that in FontAwesome v6 the fa class is verboten immediately before the specific class for the icon, or something like that? But I imagine the fix might somehow be related to that.

It feels hacky for me to use string replacement for this in the meanwhile, but I'm also not finding $variables['attributes'] key in my preprocess (in spite of it seemingly being added in the original module code), so also writing this ticket hoping for a better workaround in that regard before a fix here could be worked on.

Remaining tasks

User interface changes

API changes

Data model changes

💬 Support request
Status

Fixed

Version

1.9

Component

Code

Created by

🇺🇸United States maxstarkenburg Washington, DC

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @maxstarkenburg
  • Comment about 1 year ago →
    🇮🇩Indonesia gausarts

    Thank you.

    Looks like BC issue to me, internal to FA.

    Here is the note:
    https://git.drupalcode.org/project/linkicon/-/blob/8.x-1.9/linkicon.them...

    Shortly:

    • Before FA v6, that line says fab fas far must come before fa, else broken. Logically the opposite should be the correct one (fa fas, not fas fa), but the first/correct is broken.
    • Since FA v6, they corrected that mistake, but did not consider BC, based on your workaround.

    Browsers don't care, they will both work. It is FA JS which is the issue.

    Try not using JS option in your FA.module settings to prove it.

    Your workaround is the only way for now, unless they maintain BC down to v3 which I haven't checked for.

    If you could verify the reverse order work fine for v3 or v4 up with JS enabled, this module can instead re-order it.

  • Comment about 1 year ago →
    System Message
    • gausarts → committed fb8231a1 on 8.x-1.x 
      Issue #3399168 by maxstarkenburg: FA v6 compatibility, some "fab" icons...
  • Status changed to Fixed about 1 year ago
  • Comment about 1 year ago →
    🇮🇩Indonesia gausarts

    I think I spotted the issue better with CSS orders.

    Still not a Bug as it is an optional integration, and also works fine with Web Fonts variant.

    This will do.

    Feel free to re-open if still an issue.
    Thanks.

  • Comment about 1 year ago →
    🇺🇸United States maxstarkenburg Washington, DC

    Thank you @gausarts! Wasn't expecting such a swift reply and action.

    I didn't test verifying things with non-SVG or versions prior to v6, but was able to test and confirm that release 1.10 resolves my issue with class orders (as long as I retain fab or fa-brands as an additional icon class), so I was able to remove my hacky workaround.

    Thanks again!

  • Comment about 1 year ago →
    System Message

    Automatically closed - issue fixed for 2 weeks with no activity.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024