Introduction to 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.
The Challenge with Font Awesome Version 6 in Bubble
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. 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 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 from my font but 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 your specific web app your domain.
Adding New Font Awesome Icons to Bubble
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. 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 it, but we're using a script which pulls the library across. 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 the Font Awesome name and add it into a text label.
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" and add all that in. So, this is actually really cool because it means that by adding the kit script into your Bubble app, you can now pull in all of the new Font Awesome libraries and icons. Now, I've not tried this on paid icons because I don't have a paid Font Awesome account, and I've not tried this on the different variations or different thicknesses of icons. For example, we've got "sharp." I'm just gonna try it. I'm gonna try it. 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 using this method, please leave a comment below and share it with the community.