Dynamic icons with Option Sets

Option Sets and Icon Libraries 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 we fed easy we just add it as an attribute. This is using an icon library and we're going to use in 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 and planet no code.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 planet no code.com.

Adding Icons to Option Sets with Font Awesome

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. 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 HTML called BB code which is very popular in the on those 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 inline into your text and we're going to be combining those two things here.

Setting Up the Icon Attribute

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. 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.

Selecting and Implementing Icons

So what was the first one dashboard so I'm going to search for dashboard and for the best thing we'll use this one here and we can see that the identity of this icons expressed as FA - dot is it I'm gonna say this wrong this is like an American term tachometer so again point out 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 this certain by the way this search on the newer font awesome libraries is much better yes it's much more fuzzy search so in fact if I just go with card we'll say credit card okay how do I now display this so I'm going to go into design I'm not focusing on making this look beautiful if I'm gonna leave this fixed even though of course if you're building anything seriously Bubble 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 a repeating group and this will be our nav I think or a nav I called it menu that's why I can't see it all at all menu items we're only gonna have three in this case 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 gonna add the icon in first oh okay Bubble will delete that let me just do it from scratch this is why me about BB codes when you use square brackets with FA we can now insert in the icon name from font awesome close our BB code square brackets I'm gonna 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 bit in this tutorial which is how you can add dynamic color into this 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 don't have any saved my desktop either so this is to be an HTML hex code format which looks something like this six digits I mean you can abbreviate them that's a three in particular cases but sometimes that isn't completely compatible so I'm gonna 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 gonna make hex code up and just see what color it comes out as I probably really butchered the syntax there but it's gonna allow me to demonstrate it so what if it wants 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 will insert in the code the BB code needed to do this and so I need to insert the hex code in here so I'm gonna say company's item color and then preview okay you can have similar word this is what because I point out evidence it that is black that's the light gray and that one hasn't worked probably because I picked a poor I probably got the syntax or at least let me put in a three four four four four four okay look you know it works I'll put it in practice it's done shows the front of it there 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