I am having trouble getting FontAwesome Pro (FA from here on out) to work properly. I am using Remix along with the Netlify Remix plugin. At first I naively just did a git deploy and expected everything to be OK.
However, since then I now know that it was a permissions error. FA requires a key in order to be downloaded. I thought that Netlify would take it from my .npmrc file, but again, learned that is not the case. Though I still need to use the the .npmrc file I altered it to now include an Environment variable.
So I changed the file to require the FONT_AWESOME_PRO_TOKEN variable then set that variable in my Netlify panel to include my private key for FA.
Success!!! Or so I thought
The site now builds properly, but I still do not see the Icons.
When I inspect the dev panel in Chrome or Firefox it says:- downloadable font: download failed (font-family: “Font Awesome 6 Duotone”
I have now run out of ideas on what to do. My only other alternative is to use FA Free, but I do not want to do that (especially as I am paying for PRO).
I am at a complete loss and do not know where to go from here.
I tried using the latter one (as FontAwesome is not a sub-module, just a private NPM resource).
I added in the NPM_TOKEN like it says and then added that token to my deploy using the dashboard like it shows.
However, it still does not display the icons. Just an empty space like before.
One thing I did notice is that my .npmrc is different than the one listed in that link.
For example their .npmrc says to do it like this //registry.npmjs.org/:_authToken=${NPM_TOKEN}
However, my .npmrc is like this: @fortawesome:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=${NPM_TOKEN}
It seems that FontAwesome themselves have their own private NPM and it needs to be pulled down from there not the public NPM repo. Could this be why it fails?
Yep, seen that.
That is the page that tells me how to set up .npmrc amongst other things.
Going through all the site to see if I can anything that will help me get around this.
I think I’ve solved it.
Have to create what’s called a Kit
This basically produces a JS file that is locked to my FA Pro account.
Plus I can further limit it to specific domains.
Just re-deployed and I can now see all the icons I require.
I have just deployed a site using Netlify and my FA 6 icons are not showing up. I did also create a FontAwesome Kit, and I can see all the FA calls going out and coming back 200OK, but the icons are not showing up (they are showing up locally).
Are you aware of any other reasons for FA icons to not be showing up after a Netlify deploy, when they are showing up locally?
this will help future Forums members who encounter similar situatuons.