How to update Font Awesome to V6
The Bubble.io icon library is stuck with Font Awesome version 4 because V4 is not backwards compatibility with Font Awesome's most recent release version 6. In this Bubble tutorial video we demonstrate a work around that'll help you import the latest Font Awesome icons into Bubble.
Unlock Font Awesome 6 in Bubble: Learn how to integrate the latest icons into your app!
Frustrated with Bubble's Icon Library? Discover the secret to accessing Font Awesome's newest icons in your Bubble app.
Upgrade Your Bubble Icons: Step-by-step guide to adding Font Awesome 6 without breaking your app.
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
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.