Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: fa-credit-card seems to ignore styleDefault configuration #20191

Open
2 tasks done
jetwiwo opened this issue Apr 11, 2024 · 2 comments
Open
2 tasks done

Bug: fa-credit-card seems to ignore styleDefault configuration #20191

jetwiwo opened this issue Apr 11, 2024 · 2 comments
Labels
bug needs-triage This bug needs to be confirmed

Comments

@jetwiwo
Copy link

jetwiwo commented Apr 11, 2024 •
edited

Bug description

When setting styleDefault: 'thin' then <i class="fa fa-credit-card"></i> should be replaced with the credit card icon using the style set by FontAwesomeConfig.styleDefault. Instead it is using the regular style, as indicated by data-prefix="far" and the fact that the icon is not thin.

Other icons are working correctly. The kit I have this issue with is a pro kit owned by my organisation, but I have approximated the reproduction in plnkr to avoid publishing my employer's font awesome pro kit code.

Reproducible test case

https://plnkr.co/edit/qFrlAmjFc65YWRst

Screenshots

This screenshot shows the issue occurring in the following html

<html>
    <head>
        <script>
            //https://fontawesome.com/docs/apis/javascript/configuration
            window.FontAwesomeConfig = {
                styleDefault: 'thin',
                familyDefault: 'classic',
            };
        </script>
    <script src="https://kit.fontawesome.com/REDACTED.js" crossorigin="anonymous"></script>
    </head>
    <body>

        <h1>TEST</h1>
        <p>Default credit card, should be thin</p><i class="fa fa-credit-card"></i>
        <p>Regular credit card, should be regular</p><i class="far fa-credit-card"></i>
        <p>Default heart, should be thin</p><i class="fa fa-heart"></i>
        <p>Regular heart, should be regular</p><i class="far fa-heart"></i>
    </body>
</html>

fa-credit-card-test

Font Awesome version

v6.5.2

Serving

Kit

Implementation

SVG+JS

Browser and Operating System

  • Edge 123 on Windows 11

Web bug report checklist

  • I have included a test case because my odds go way up that the team can fix this when I do
  • I have searched for existing issues and to the best of my knowledge this is not a duplicate
@jetwiwo jetwiwo added bug needs-triage This bug needs to be confirmed labels Apr 11, 2024
@robmadole
Copy link
Member

Hey there, the familyDefault can be either "classic" or "sharp". Can you try those and let us know if that fixes the issue?

https://docs.fontawesome.com/apis/javascript/configuration/#options

@jetwiwo
Copy link
Author

jetwiwo commented Apr 16, 2024

That does not fix the issue. Nor does omitting the familyDefault altogether. This appears to be solely an issue with the styleDefault option.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs-triage This bug needs to be confirmed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@robmadole @jetwiwo