0

I am trying to use the new fontawesome kit url in magento 2.3.6 but i cant get it to work. It seems to load the js but not icons aren't displayed.
I have added <script src="https://kit.fontawesome.com/<my-unique-id>.js" crossorigin="anonymous" src_type="url"></script> to my default_head_blocks.xml and when using developer tools in my browser i can see it is fetching the URL, but no icons load, but the styling is present if you inspect the element. is one particular element i am using.
Does anyone have any ideas apart from adding font awesome locally which i was trying to avoid.

2 Answers 2

0

This is unfortunately not working with FA hosted solution, it has to be only self hosted. So from your account, download the web package. You would need JS files only.

In custom theme, I had to create requirejs-config.js:

var config = {
    paths: {
        'fontawesome': 'js/fontawesome/fontawesome.min',
        'fontawesome/solid': 'js/fontawesome/solid.min',
        'fontawesome/brands': 'js/fontawesome/brands.min',
        'fontawesome/regular': 'js/fontawesome/regular.min', // PRO only
        'fontawesome/light': 'js/fontawesome/light.min', // PRO only
        'fontawesome/duotone': 'js/fontawesome/duotone.min' // PRO only
    },
    shim: {
        'fontawesome': {
            deps: ['fontawesome/light', 'fontawesome/brands']
        }
    },
    deps: [
        'fontawesome'
    ]
};

(I am using just brands and light theme so dependency on others is not required.)

This will load automatically FA on all pages without any other call in the code.

Tested on Magento 2.4.3.

1
  • Can you elaborate why this has to be self hosted instead of FA hosted? Commented Sep 29, 2023 at 15:26
-1

Add the below link in your default_head_blocks.xml file,

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
3
  • 2
    Using an old version of fontawesome is not an answer. There is also a css option of fontawesome 5 (which does work), but that is not being updated anymore which is why i was asking specifically about the javascript kits.
    – Alex Smith
    Commented Jan 12, 2021 at 8:34
  • May be direct js link is not worked , implement the font-awesome js manually in your theme or module. Commented Jan 12, 2021 at 10:23
  • The link works. How do you mean "implement js manually"? Other than adding to the default_head_blocks.xml like i have done, how would i do it another way?
    – Alex Smith
    Commented Jan 13, 2021 at 11:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.