Understanding Option Sets in Bubble

Option sets are an incredible way to have consistent data throughout your app. In this Bubble tutorial video, I'm going to show you how you can add icons to option sets. Now, this is not adding an image to option set. That would be fairly easy. We just add it as an attribute.

Using Font Awesome for Option Sets

This is using an icon library, and we're going to use the Font Awesome library to do this. But before I launch into that, if you're learning Bubble, there is no better place to learn no code web development than planetnocode.com. We've got hundreds of Bubble tutorial videos just like this one. You can't find them all on YouTube. You can only find all our videos at planetnocode.com.

How to Add Icons to Option Sets

Let me show you how you can add in icons to option sets using Font Awesome. So I'm going to add in an option set called Menu because this particular way of doing things can work quite well for a menu. And I'll just have dashboard, let's have settings, and let's have billing.

Understanding BB Code in Bubble

Okay, now the icon is actually going to be a text field, and I'll show you why. Because we're going to be using an ability in Bubble which effectively is a like a variation on HTML called BB code, which is very popular in the olden days on forums. But it's how you can add rich text to text labels in Bubble. And it's also how you can add in Font Awesome icons in line into your text. And we're going to be combining those two things here.

Adding Icons from Font Awesome

So I'm going to add in an icon as text, and then I need to go to Font Awesome. Now for some unknown reason, Bubble does not have the latest version of Font Awesome, not even the free one. You have to go all the way down to the bottom, and we'll go all versions, and then maybe someone can someone can correct me in the comments if I'm wrong. But I think Bubble runs on Font Awesome version 4.

Choosing the Right Icon

So this, and ignore the warning, this is the library of icons that you have access to in Bubble by default. Of course you can install other plugins that give you access to other icons, but for this tutorial we'll be using this library.

Displaying Icons in Bubble

So what was the first one? Dashboard. So I'm going to search for dashboard, and for want of a better thing we'll use this one here. And we can see that the identity of this icon is expressed as fa-dot, is it, I'm going to say this wrong, this is like an American term, tachometer. So again, point down in the comments if I said that wrong. But I'm going to copy that part there and go back onto icons, modify the attribute, and say that this icon is the tachometer. Tachometer, who knows. Settings. Settings is obviously universally defined as a cog. So I'm copying that. And then we have billing. See what it comes up with, billing. By the way, the search on the Neuafont Awesome libraries is much better. Yeah, it's much more fuzzy search. So in fact if I just go with card, we'll say credit card.

Displaying Icons in Design

Okay, how do I now display this? So I'm going to go into design. I'm not focusing on making this look beautiful. In fact I'm going to leave this fixed, even though of course if you're building anything seriously, it should be rows or columns 99% of the time. But I can get away with this demonstration by using using fix. So I'm going to add in the repeating group and this will be our nav. I think we're at nav, I called it menu, that's why I can't see it. All menu items, we're only going to have three in this case.

Adding Dynamic Colors to Icons

And so if I want to display them, I just add a text in there and I can say current menu items display and I'm going to preview this just to show you the difference that it makes. Preview the right page. There we go. So I have a repeating group listing through all of the different options in my menu option set. How do I add the icon in? Well that is really easy. I'm going to add the icon in first. Oh okay, Bubble deleted that. Let me just do it from scratch. This is what I mean by bbcode. When you use square brackets with fa, we can now insert in the icon name from Font Awesome, close our bbcode square brackets. I'm going to put two spaces in because I think that looks better and then say display. And there we have it. There are our different icons. I'm going to show you one extra bonus in this tutorial which is how you can add dynamic color into this.

Adding Color Field to Option Sets

So in our data option set, I'm going to add in a field called color and it's going to be text and so dashboard. Oh I don't know that many hex codes off the top of my head. I don't have any saved on my desktop either. So this needs to be an HTML hex code format which looks something like this. Six digits. I mean you can't bring it in now to three in particular cases but sometimes that isn't completely compatible. So I'm going to go with six and I know that that is the hex code for black. I know that this is the hex code for a grey and I'm going to make a hex code up and just see what color it comes out as. I probably really butchered the syntax there. But it's going to allow me to demonstrate it.

Changing the Color of Icons

So what if we wanted to change the color of just the icon? So the easiest way I found to do this is to go into the rich text editor and then highlight and just pick a random color here because then Bubble inserts in the code, the bb code needed to do this. And so I need to insert the hex code in here. So I'm going to say can't renews item color and then preview. Okay you're going to have to tell my word this has worked because I'll evidence it. That is black, that's a light grey and that one hasn't worked probably because I picked a poor... I probably got the syntax or at least let me put in... not worked. Okay look you know it works I put it in practice it's demonstrated there.

Conclusion

If you have any questions please leave a comment below we read every single one and remember if you're learning Bubble join our membership get access to all of our videos