Fixed width "fa-fw" class keeps getting stripped.

Created on 12 June 2024, 5 months ago
Updated 27 June 2024, 5 months ago

Problem/Motivation

If I put the following code into my website <i class="fa-brands fa-facebook fa-fw">&nbsp;</i>, it ends up gettings tripped like so <i class="fa-brands fa-facebookfw">&nbsp;</i>, which makes it error out. Not sure why this is happening since this is a standard fontawesome class?

I tried upgrading to 1.1.0 to see if that mitigated the problem, however, it actually made it worse because not only did it still strip out that class, I can no longer wrap my icons in anchor tags as it strips all links from my icons as well so I ended up having to downgrade just to still be able to link my icons.

Example: <a href="#" target="_blank"><i class="fa-brands fa-facebook fa-fw">&nbsp;</i></a> would now just become <i class="fa-brands fa-facebookfw">&nbsp;</i>.

Any ideas as to why this is happening?

I also tried adding i.fa-fw|Fixed Width to my styles, however, this didn't help either.

Steps to reproduce

Install module and try adding the `fa-fw` class to your icons in the source code.

πŸ› Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

πŸ‡¨πŸ‡¦Canada SnowCoder

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

Merge Requests

Comments & Activities

  • Issue created by @SnowCoder
  • Status changed to Needs work 5 months ago
  • πŸ‡ΊπŸ‡ΈUnited States tim.tripp

    I can produce the fa-fw problem but not the stripping of links in 1.1.0. The only causes I can think of for that are a caching issue or the Link plugin isn't enabled in your editor (a change from 1.0.0 was the Link plugin must be enabled to allow linkHref). How are you allowing target="_blank" on your links?

  • Status changed to Active 5 months ago
  • πŸ‡¨πŸ‡¦Canada SnowCoder

    Ok, glad the fa-fw problem isn't just me.
    As for the stripping of links, here's a screenshot of my profile. As you can see, I have the Link plugin enabled.
    Regarding the target="_blank", I mispoke. I didn't realize that wasn't working for me either anymore.

  • Status changed to Needs work 5 months ago
  • πŸ‡ΊπŸ‡ΈUnited States tim.tripp

    Are you using a third-party contrib module for "Advanced Links"? The stock Link plugin doesn't seem to provide that.

  • Status changed to Needs review 5 months ago
  • πŸ‡ΊπŸ‡ΈUnited States tim.tripp

    Patch file for fa-fw fix, please review.

  • πŸ‡¨πŸ‡¦Canada SnowCoder

    Ok, I tried the patch, cleared the cache and the original problem seemed to have been fixed. I can now use fa-fw without it being stripped.

    However, the anchor problem still persists where it strips out the following extra attributes in my one example: target="_blank" title="Title text" aria-label="Aria label".

  • πŸ‡ΊπŸ‡ΈUnited States tim.tripp

    I need to know how you're seeing "Advanced Links" because if you're using a contrib module to mess with links this is likely why I can't reproduce your issue with the links. I don't have "Advanced Links" on my installation. Also are you saying it just strips the attributes now, or is it still the entire link?

    Thanks for verifying the fa-fw bug is fixed.

  • πŸ‡¨πŸ‡¦Canada SnowCoder

    Apologies. Yes, I'm using Editor Advanced Link module β†’ on my site.

    Also, the attributes are the only thing being stripped now as the link does remain.

    <a href="#" target="_blank" title="Title text" aria-label="Aria label"><i class="fa-brands fa-facebook fa-fw">&nbsp;</i></a>
    now becomes:
    <a href="#"><i class="fa-brands fa-facebook fa-fw">&nbsp;</i></a>

  • Pipeline finished with Skipped
    5 months ago
    #197550
  • πŸ‡ΊπŸ‡ΈUnited States tim.tripp

    Great, can you open a separate issue for that one? I'll merge into the dev branch and mark this one as resolved as it relates to the multiple FA classes bug. Thanks for finding that one.

    It looks like Drupal Media exhibits the same behavior of stripping the advanced link attributes so the issue isn't unique to icons. You may even try opening an issue in the Editor Advanced Link module to say that both the Drupal Media and Icon plugins are stripping the advanced link attributes when they are linked, maybe the contributors there can get to the bottom of what's happening.

  • Status changed to Fixed 5 months ago
  • πŸ‡ΊπŸ‡ΈUnited States tim.tripp
  • πŸ‡ΊπŸ‡ΈUnited States tim.tripp

    Drupal Media seems better than Icon at preserving the target="_blank" specifically but always strips the other attributes like title and aria-labeljust like Icon. Not quite sure what's going on with their solution to this.

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

Production build 0.71.5 2024