How to add Font Awesome icons to sidebar in Bubble
In this Bubble tutorial we demonstrate a neat trick using Font Awesome to show icons within your Option Set values.
Unlock the power of sidebar icons: Learn how to add Font Awesome icons to your Bubble.io sidebar navigation in minutes!
One-page app navigation made easy: Discover how to create a sleek one-page app with custom states and option sets for seamless user experience.
Elevate your Bubble app's UI: Master the art of adding icons to enhance your sidebar navigation and improve overall design aesthetics.
Adding Icons to Sidebar Navigation in Bubble
If you're building a one-page app in Bubble.io, you'll want to keep watching because I'm going to show you how to add icons to your sidebar navigation. Now there are a number of caveats here. Are you building a one-page app? Yes. Are you using custom states to change between different views just like I am here? And are you using option sets in order to get the sidebar lists, so dashboard, orders and settings? Let me show you how that looks in the back end.
Setting Up Option Sets and Custom States
I've got an option set called View and I've got dashboard, orders and settings. And then on Design, here's my sidebar. I have a repeating group showing all of my view option sets and I've simply got a workflow action that changes a custom state for the view. That's clicked and then, last bit of the recap, if I go on to dashboard, I'm saying only show the dashboards where my custom state's view value is dashboard.
Adding Icons to Option Sets
So how do I add icons to my option set? Well, there's a neat trick you can do. The icon library that is baked into Bubble is called Font Awesome. And for some unknown reason, they've not bothered to update that library and so the Font Awesome version that Bubble uses is Font Awesome 4. And as you can see here from the Font Awesome website, it's telling you to upgrade to 5. Now actually, Font Awesome has progressed quite a bit, but we have to use version 4.
Step-by-Step Guide to Adding Icons
Let me show you how we can quickly and easily add an icon to the sidebar. So I'm going to go to my option sets and I'm going to create a new field. At the moment, display, that's basically my label. That prints dashboard, orders, settings. So if I add in a new one, I'm going to call this one FA for Font Awesome icon and make it text. I'm then going to go on to the Font Awesome website and search for an appropriate icon.
Selecting and Implementing Icons
So dashboard, now the search on the newer ones of Font Awesome is a little bit better, but let me take this one here. And so I'm going to select this part of the label and copy that. And then on dashboard, add it in to that and then orders. So I'm going to go back, see if there's billing, no card. Yeah, get the credit card. Copy that. Add that into my orders and then settings. Hopefully we can find a nice cog. Yeah, here we go. Oh, it's just a cog. I can type that in.
Displaying Icons in Your Bubble App
How do I then display this in my Bubble app? So if I go to my text label here, at the moment it's just printing the current view's, current cell's view's display. But I can add in square brackets FA and then I can dynamically insert in the icon and then close my square brackets. And I'm going to put in a couple of spaces and let me show you what that does. It adds in the icon and this can be really helpful. It doesn't have to be to do with navigation. This can just be a way of adding in a Font Awesome icon in line into your text, but it does work really well for a sidebar navigation just like this.
One-Page vs Multi-Page App Architecture
Now I was working with a Bubble coaching client a few days ago and we were discussing the merits of whether you should be building a one-page app or a multi-page app. And I think it kind of comes down to the hierarchy of the app you're building. I like to look for inspiration from the companies. You think of, I mean, it's a bit murky now, but you think about Twitter or you think about Facebook. A lot of, you know, they divide what's on the page between whether the page loads to a new page or whether it is like a one-page app. And I think that has to do with the hierarchy.
Recommendations for App Structure
And so I genuinely like to advise that unless you're trying to give the impression of a native piece of software, like you're trying to give the illusion to your users that they're not actually browsing a website, but they're using some desktop or mobile software. I like to split my app between multiple pages. And so in this instance, I would actually have these as different pages. I would have my URL changing at the top and that makes the organization on my Bubble app a bit better. It means that the Bubble editor loads quicker for me when I'm editing a page. And it also means that if someone, one of my users sends me a question about an app, I can sort of send them directly to the location that is the resolution to their question.
Balancing Custom States and Multiple Pages
Now, if I was on orders, for example, to have a kind of past orders, future orders, I could have another sort of navigation bar along the top up here. And that then might be a good use for custom states. But I'd say that your time top tier showing different pages. Yeah, I just think create actual different pages and Bubble rather than using custom states because I've worked on and worked with people. And their elementary is just gigantic. And it slows down the development in the end because it takes a really long time to find what you're looking for. Now, it is personal preference and I'm just expressing mine, which is, yeah, split it out into multiple pages when you can.
Conclusion
But there we have it. That's a long-winded way of talking about sidebars, navigations in general, and the key point in this video, how to add an icon to your sidebar. Hey, guys, if you're finding these YouTube tutorials helpful, we invite you to explore even more content on our website at planetnocode.com. We have a large selection and variety of super in-depth and detailed video lessons created and curated just for our pain members. It's all about learning together and accelerating your No-Code journey. Check us out at www.planetnocode.com and let's continue building without limits.
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.