FontAwesome 6.x Kit - Icons Not Showing After Deploy

Support
1

The site I’m working on: https://bothsides.info

Deployed fine via netlify, but the icons that are loading fine locally, are not showing up on my site after deployment.

I’m using a FA Kit, which references this script call:

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

I can see all the calls coming back from FA, so I don’t think it’s a content security or headers issue.

image
image725×324 40.4 KB

But the fonts are not showing up on my site after deployment.

2

Hi @joshuasiegal

Where are the icons meant to appear?

3

Thanks for the reply.

This is how it looks locally:

image

4

Thanks.

The issue is to do with opacity, not the icons.

Screen Shot 2022-10-02 at 3.53.52 pm
Screen Shot 2022-10-02 at 3.53.52 pm2288×852 310 KB

This is caused (usually) during CSS minification as mentioned in Percent values in @keyframes in CSS are incorrect only at build time. · Issue #6076 · vuejs/vue-cli · GitHub

Rather than using percentage values such as 80%, use decimal such as 0.8.

Also a note, if you are creating a new thread, please don’t post the same content on an existing thread.

5

D’oh! Fixed!

Thanks so much for the amazingly quick replies!

I posted on the other thread after finding it via google, and then decided to make it a new post. I will watch out for that in the future.

Thanks again for the help, much appreciated!