UIkit doesn’t load FA by default, the built-in icons are far nicer (IMO) but there are times when you need Font Awesome. So, I’ve found adding this to the head section in Inspector does the trick.
You need to be using https not just http.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
If there is a better way to do, mention it below.
Any stacks that use FA will load FA4 via Stacks - loading your own v5 will obviously double the size (and more) but may also conflict with the FA4 class names. It is not recommended to have both on the page.
Also - doing it that way is not GDPR compliant and is likely to cause certain people to have an aneurism. Load it locally if you really want to do this or else just put a stack on the page that will load the Stacks version that is built in an you can be confident that all stacks are singing of the same song sheet.
Hum, it’s Steve. He doesn’t care about that.
This week, I 'ave been mostly eating icons.
Only the Germans.
I think, maybe wrong, but I think none of the UIkit3 stacks load FA’s, so using a script that requires them, i think this is the way I have to go.
I think.
Yes, so long as you are not going to use any other stacks (many of which will load the built in version from Stacks)
I actually didn’t know it worked like that. So, most likely better just to fire a stack that uses them onto the page, as you suggested.
So now the question is… What is the lightest third-party stack that loads the default Stacks FS collection?
Saying that, will Scribe load them? I’m still using Scribe as my regular header/text stack.
Or … forget FA icons as fonts completely and use the individual svg’s either warehoused or in BP svg
Some of the scripts I use uses them.
Thats exactly what I have been doing of late - by doing so you are not reliant on FA to keep serving them and needing to continually send out requests (page load speeds)
Where possible I now try to use SVG code in BWD stacks
I would never use the FA CDN when Stacks has them built in and packaged locally with your site.
The only reason not to do this would be the clammer to use FA5 which I don’t really understand. There are a lot of nicer icon sets out there, the draw of FA was always that it was free, easy and accessible although the icons looked like there were drawn by a 5 year old with a felt tip pen.
FA5 has lost a lot of these qualities in order to make the strokes a bit thinner and add a load of icons that most people wont use.
Agree that svgs are a great approach for icons. I would also recommend nucleo app - which is a free icon manager. Can right click on any icon in it to copy the svg code (saves opening in a text/code editor) and can also set it up to strip out the width and height values from the code which is generally useful too.
p.s. apologies to Steve for taking this further away from his original question.
Not a bother. I’nm sorted regards my OP, so it’s all good.
Great share Stuart - thanks kindly
Yes - Nucleo is great. I have the lifetime subscription to their icons as well and there is not a lot else you need.
For reference:
Hm, maybe a bit dumb question…: But how can I be sure that a stack uses the built-in FA in Stacks? And if they are built-into Stacks, why do I sometimes need stacks like FA-Enabler or s.th. similar to make FA-icons appear in RW preview? Why can’t I simply type the FA4 syntax in every theme and every stack if FA4 is built into Stacks? Sorry, but probably I can’t see the forest for the trees… ;-)
It’s not loaded by default. A stack developer has to specify that they want it included for the page.
Thanks Stuart, that makes sense. Anyone any recommendations which stack(s) ideally could be used to enable/call the Stacks-internal version of FA4 in a project? From the many stacks available which use FA4 I don’t know which ones make use of the internal version. I’m asking because here in Germany it’s important to comply to these fu…ing DSGVO rules… :-/
Most stacks that use it will just be calling the Stack’s version - that’s the way they should be doing it anyway. In Stacks you can set whether it is a local or CDN version that is used.
Would be a reasonable feature request to @isaiah to allow users to load FA without requiring a stack to enable it.