Font-awesome: Duplication of css selector #id

[AlexPaterson]

Hello, I am an extremely Keen Protagonist of clean code, so I regularly ensure my own code is semantically correct.

I run my sites through the Google Audit console, and I note I'm getting a less than perfect score on my accessibility.

it says [id] attributes on the page are not unique.

Hope you can do something about this soon.

ps, Im using your javascript code like this

Thanks

Alex

-
 

 

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

I'm using a kit here: https://tagliala.github.io/fa15167-kit but I cannot see any offence in the audits

Could you please provide a reproducible test case as well as steps to reproduce this?

[cschweda]

Yes, I can verify this.

Google's Lighthouse audit flags fontawesome for duplicated ids.

Steps to reproduce

• Go here: https://icjia.illinois.gov/r3/faqs
• Open Chrome dev console.
• Click on audit tab.

Error

Failing Elements
link#font-awesome-5-kit-css

Reason

<link href="https://kit-pro.fontawesome.com/releases/latest/css/pro.min.css" media="all" rel="stylesheet" id="font-awesome-5-kit-css">

and

<link href="https://kit-pro.fontawesome.com/releases/latest/css/pro-v4-shims.min.css" media="all" rel="stylesheet" id="font-awesome-5-kit-css">

Both have the same id: font-awesome-5-kit-css

My quick fix

let fontAwesomeLink = document.querySelectorAll(
      "link[href='https://kit-pro.fontawesome.com/releases/latest/css/pro.min.css']"
    );
    fontAwesomeLink[0].id = "font-awesome-5-kit-css_1";

Any chance for a better fix?
 

[tagliala]

Thanks

I can see that there are two elements with the same ID, but this does not come from our docs: https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4#manually

Where did you find the instructions to install Font Awesome? Is there an official plugin or extension adding those id attributes?

Please remove id="font-awesome-5-kit-css" from the html and you should be fine

[cschweda]

I'm installing it via:

 <script
      src="https://kit.fontawesome.com/xxxxxx.js"
      crossorigin="anonymous"
    ></script>

Is that not the right way to install? I assume it's from that .js script that it's embedding all the links. I'm able to see the links when I view the page via the 'Elements' view in the dev console.

Unfortunately, my fix above doesn't appear to work. I assume there's some kind of async/defer thing going on with the FontAwesome .js script.

I'm using Vue -- standard SPA via the Vue CLI -- with a single index.html where I'm using the script tag above.

EDIT: I downgraded from the pro kit to the free version -- and everything is fine. I realized I'm not using any pro icons -- so the downgrade was fine.

[tagliala]

Hi, could you please disclose your pro kit id?

I cannot replicate

Demo: https://jsfiddle.net/tagliala/9w3c1ud5/
Configuration: Pro kit CSS

Output (no ids):

      <script type="text/javascript" src="https://kit.fontawesome.com/01d926b69c.js"></script><link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.10.1/css/pro.min.css" media="all"><link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.10.1/css/pro-v4-shims.min.css" media="all">

[cschweda]

Sure:

<script
      src="https://kit.fontawesome.com/36a3d7fc0d.js"
      crossorigin="anonymous"
    ></script> 

[tagliala]

https://jsfiddle.net/tagliala/3ncykg50/

I've placed your kit code here, I'm not getting the IDs

Also, in the source page of https://icjia.illinois.gov/r3/faqs, I cannot find the code relative to the kit

I don't what exactly is going on, but it seems related to a third-party plugin/application

[cschweda]

Yep -- that's the url.

I re-enabled the pro kit and ... now it works?! Wow!

I have no idea where those IDs were coming from -- but now they're not there -- and the URL is passing the Lighthouse accessibility audit.

Thanks for looking into this. Not sure what happened -- but, hey, it's all good now. :)

[atsolberg]

I'm also experiencing this issue, with a pro version kit.

I experienced the same issue with this free version kit: https://kit.fontawesome.com/fe766b0f79.js and upgraded to pro hoping that would fix it.

Looking at the source code of that kit, it seems this function will always set the same id on the links that it creates and appends:

[tagliala]

Thanks!

I was eventually able to replicate.

Demo: https://jsfiddle.net/tagliala/e3n2Lws4/

Kit Configuration:

• Free
• Web Font
• Enable Version 4 Compatibility

Option is causing the issue

• Enable Version 4 Compatibility

Let's assign @robmadole

@robmadole I don't know if there are some other pieces of code using that ID to replace or detect font awesome in other places, we should double check

[robmadole]

I don't see if used anywhere else. So we should be able to remove it without an issue.

[robmadole]

Got a fix for this and it should be deployed later today.

[robmadole]

Ok all, this has been fixed and deployed.

You will need to re-save your kits to get the changes. Head to https://fontawesome.com/kits, choose your Kit, go to the Settings and click "Save Changes" (even though there are no changes).

Please let me know if this fixes things up for you.

[atsolberg]

All fixed, thanks for the quick turn-around!

[tagliala]

Closing here