search

FortAwesome / Font-Awesome

The iconic SVG, font, and CSS toolkit
https://fontawesome.com
Other
73.93k stars 12.2k forks source link

Bug: 6.7 javascript breaks jquery #20423

Open dougroutledge opened 3 days ago

dougroutledge commented 3 days ago

Bug description

After updating from 6.6 to 6.7 jquery breaks and a console.log($) returns fontawesome items instead of jquery.

Reproducible test case

No response

Screenshots

No response

Font Awesome version

v6.7.0

Serving

Self-hosted

Implementation

~CSS~ JS (edit by @tagliala)

Browser and Operating System

Any browser, any os.

Web bug report checklist

robmadole commented 2 days ago

@dougroutledge if you can give us a reproduction we'll take a look.

dougroutledge commented 1 day ago

confirmed with 6.7.1 as well. I replace all.min.css, all.min.js, and v4 shim css and js files with 6.6.0 and it's fine. 6.7.0 and 6.7.1 throw an error about $, and a console.log($) doesn't return jquery objects it returns fontawesome objects instead. I don't have any of this in a production where you could access it currently. Let me see if I can build a small solution that can illustrate it.

dougroutledge commented 1 day ago

Oddly enough if I load the free one from cdn instead of the pro from the local folder, it doesn't error, it just have 75% of my icons missing.

dougroutledge commented 1 day ago

image

tagliala commented 1 day ago

Hello,

in the opening post

Implementation CSS

is mentioned, however in the subsequent message I can see

I replace all.min.css, all.min.js, and v4 shim css and js files with 6.6.0 and it's fine

This does not look correct

This is using both css and js implementation, I would not expect both of them being load

I can't see how tthe CSS only implementation can interfere with jQuery.

So we should suppose it is the issue is with a self-hosted javascript file + shims?

dougroutledge commented 1 day ago

Moving Jquery's script load to after FA, seems to fix whatever FA is doing with $. All previous versions functioned as expected loaded jquery first.

tagliala commented 1 day ago

@robmadole I managed to easily replicate

  1. Download PRO 6.7.1 assets from fontawesome.com
  2. Create a new folder with the following html template:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>FA 20423</title>
    <meta name="description" content="fa" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <script src="assets/all.min.js"></script>
  </head>
  <body>
    <p>
      <i class="fas fa-ufo"></i>
    </p>
    <p>
      <small>
        <a href="https://github.com/FortAwesome/Font-Awesome/issues/20423">Reproducible use case for #20423</a>
      </small>
    </p>
  </body>
</html>
  1. Copy all.min.js into assets/all.min.js
  2. Open the console and run console.log($)

Expected

$ not to be defined

Actual

image