How to add Font Awesome icons to sidebar in Bubble

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.