Forum Academy Marketplace Showcase Pricing Features

Icons in Buttons

I think it would add to customization and better design if the buttons can be styled so that they have an icon as part of the button. This idea can be scrapped together using groups and reusable elements but it’ll be a lot better if it was already a feature.

What’s the possibility of this?

Thanks!

Example:

4 Likes

I also do it with buttons, groups and icons but it can become difficult

So you’d probably need to choose where the icon is (left, top center, bottom center, right), what size the icon is, color, etc. I can see how it’s not trivial to implement, mainly on the user experience side of actually building the dang thing in the editor. Interesting!

1 Like

This is one that I’ve done at the bottom of a repeating group.

The 3 buttons is in a group to keep them together for when I need to move them. The text is set to left alignment and then I placed the icons on top of the buttons.

I had to do the workflows for the buttons and the icons otherwise if the user clicked on the icon instead of the button it would not have worked. If you move a single button the icon does not move with it unless you group them together as well. So it becomes groups in a group.

It can become time consuming so I only do it when I have to. If there’s a better way I haven’t seen it and would like to know. I created these when I just started with Bubble and didn’t think of the reusable element.

2 Likes

Here’s a basic example. https://bubble.io/page?type=page&name=icon-buttons&id=forum_app2&tab=tabs-1
The button & icon on the left is grouped together with the group set a bit wider so that it can be dragged. The button in the center is not grouped. The button on the right is grouped but the group is the same size. If you try and drag it you drag the icon or button out of the group.

Hope this helps somebody

1 Like

@peng.o

I’m doing something similar to what @raymond is doing, only it’s:
text object + icon object in a group
invisible button (ie, background is none, or full color/transparency 0%, no text) overlaid on top. All conditionals and workflows depend on the user clicking/hovering/etc. on this transparent button (which cuts down on the # of workflows, so you don’t have to handle the text + icon separately)

I put a tiny example in @raymond 's forum app page, underneath his buttons

NOTE: to display the button’s text, it’s important that it’s a text object and not a button, because right now Bubble’s buttons don’t have a H/V padding option, so you end up with text being way too close to the edge. Text objects give you much more control over the display.

honestly I’d prefer to keep doing this vs. seeing a Button+Icon implementation, it gives you the most control over positioning – if you look through the icons, you’ll notice that they are inconsistently positioned and sized, and you’d probably spend just as much time tweaking margins…

6 Likes

@lsy I like your idea more :wink:

1 Like