Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

In this Bubble tutorial video, I want to share with you a quick trick that I worked out with a Bubble Coaching client a few days ago. And this picks up from the last video we published which was about option sets and icons. As a quick recap, what I'm doing here is I'm storing an icon as a expression. Let me show you.

Using Font Awesome Library in Bubble

So here's my dashboard and I'm storing an icon as a text expression. I've taken this from the Font Awesome version 3, version 4 library in fact. And that allows me to store icons in option sets. Now you could of course store an image and use that as an icon or maybe an SVG, I'm not sure. But anyway, this is enabling me to use the Font Awesome library which is the built-in icon pack in Bubble. And I'm expressing it through a text label element just like this by using the BB code, square brackets, FA, close square brackets. And then the text label for the icon.

Color and Transparency with Hex Code

What I want to draw your attention to though here is that I've got a color for the icon and then I've got a semi-transparent color or a reduced opacity color for the background color. And you can do that using hex codes. And this is what I found out with the Bubble coaching client is that hex code has got six digits to it. But you can add two more digits to the end and that sets a transparency.

Implementing Hex Opacity with Bubble

And so I just go with hex opacity table and I found this guy's website. And effectively if I want 20% opacity, I add 33 to the end. And so that's allowed me in data, again going to dashboard, here's my dashboard icon color and here is it with 33 added to the end. I've gone through and I've done that on all of my colors and that results in me having a design like this.

Final Thoughts on Hex Code and Transparency

So quite a niche aspect, quite a niche thing, but I thought this was quite a cool implementation of something that I covered in the previous video. And if you like our previous videos and if you like this one, please like and subscribe. And also we've got even more videos than you can find anywhere else, not even on our YouTube channel. We have more videos at planetlokode.com. It's really well worth your time getting a membership there if you are learning Bubble and joining our No Code Bubble App Builder community there. If there's anything else you'd like to see done with option sets or icons, please leave a comment below.

Latest videos

lockmenu