I have a WordPress CMS website and for all the icons (fontawesome + IcoMoon) I am not using CDN, I have these icon fonts and CSS files uploaded to the server.
Below are in the font files I have for Fontawesome 6 (I've downloaded the fontawesome package on the official site):
fa-brands-400.ttf
fa-brands-400.woff2
fa-regular-400.ttf
fa-regular-400.woff2
fa-solid-900.ttf
fa-solid-900.woff2
fa-v4compatibility.ttf
fa-v4compatibility.woff2
I am using SASS for web development, so all my custom SASS files + the fontawesome SASS files are compiled into 1 CSSfile.
I have a normalize SASS file too, so I've imported that first like this:
style.scss file:
@import "normalize";
@import "vendors/vendors";
_vendors.scss file:
@import "fontawesome/fontawesome.scss";
@import "fontawesome/regular.scss";
@import "fontawesome/solid.scss";
@import "fontawesome/brands.scss";
When the webpage loads (or refreshes), it sometimes load the icons with no issue, but sometime when page reloads it will show up as blank squares. (like the screenshot below)
What is the issue?
