How to update Font Awesome to V6

Updating Font Awesome in Bubble

I've been working with Font Awesome across several videos this week and so I thought I would record a video where I show how to solve my biggest frustration with the Icon Library in Bubble and that is that the Font Awesome Icon Library in Bubble is stuck on version 4. Now I've done some digging in the Bubble Forum and found that there's a good reason for this and that's because the current version of Font Awesome with all of their new icons and I've got them filtered down here. Here are the three new icons that you can't get in Bubble or I'm going to show you how in this video. You can't get in Bubble by default and that's because version 6 which is the current version of Font Awesome is not backwards compatible with version 4 and I imagine that they're concerned about making a change that's going to break all the apps out there, not break but mean the icons don't show up all the apps out there that are using the current version of Font Awesome.

Adding Font Awesome 6 to Your Bubble App

Let me show you how you can add Font Awesome 6 to your Bubble app and it's going to take a few steps one of which is you need to sign up for a Font Awesome account because what you need is an assets kit and when you sign up for account I think they give you a free one this is varied over the years but basically you need to get yourself a kit and it's going to provide you with a script that looks a little bit like this. I've purposefully removed the ID in this script so yours will be a little bit longer but you need to take this copy it and go into your app editor and then go into SEO meta tags and add the script in here and so you can see you'll have a unique ID there I'm just choosing to protect mine so that you can't install icons for my font but you know it's just same as API keys keep it keep it protected but also you can limit it in your you want to limit that in fact in the settings tab you want to limit it to your specific web app your domain anyway sorry I'm getting sidetracked here effectively what that means is that if I go back to the icons here I've got mountain and Sun and so mountain and Sun is an icon that I cannot access in the current Bubble icon library but here it is in my Bubble app now one way you could do this is to download the SVG and upload the SVG but we're using that script which import which pulls the library across and it means that in my Bubble app if I go into the design tab I can use the same font awesome BB code that I've demonstrated in previous videos I can use it here now so I just need to write in the font awesome name and add it into a text label and to be really clear on what's going on here when I've clicked on it here's the name it's expressed like this in pure HTML but I just take everything apart from where it says FA Bubble ads all that in so this is actually really cool because it means that by adding in the the kit script into your Bubble app you can now pull in all of the new font awesome libraries now icons now I've not tried this on paid icons because I don't have a paid font awesome account and I'm not tried this on the different variations different thickness of icons like we've got sharp for example hey I'm just gonna try I'm gonna try I'm basically winging it in this video what if I write sharp in here okay it's not working so I'm gonna do a bit more digging on that if you've got any questions or tips or maybe you found that you can incorporate different variations in using this method please leave a comment below share it with the community because we love posting Bubble tutorial videos so if you've liked this one please like it on YouTube please subscribe and also head over to our website planetnocode.com because we've got hundreds of Bubble tutorial videos you can't find them all on YouTube but you can find them all on our website planetnocode.com