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:
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!
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.
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
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…
Well comparing to what they have in place already, it’s not really hard to implement. What you mentioned are actually things that are very easy to implement. It does not need to be fully dinamic in the beginning, but just having the option would not only be amazing but essencial. What interface nowadays doesn’t use icons in the buttons? This is trivial. Icons are much better for UX than text.
The current workarounds (that we shouldn’t have to go into), at least that I found were grouping a button and an icon together and putting an invisible button on top of those, acting like the real button, otherwise it would break the button’s UX because hovering on the icon would not act as clickable. Still, this workaround makes styling tricky.
And I can’t believe this is not yet possible, 5 years later
I use a text element and make it look like a button. Then for the icon just add [fa] fa-home [/fa] or whatever icon you want in there.
Hope that helps! 
For All Your No-Code Education Needs:
Make a text element look like a button and use font awesome icon in it.
you can add the font awesome icon by using this type of settings in the text element
[fa] fa-trash [/fa]
To find other font awesome icons to use just create a font awesome icon, select the one you want and look at the top for the ‘code’ to use
Thank you and boston85719 for the tips!
This seems to work fine. Btw, how can I make the cursor turn to the hand when hovering on it? Thank you
Set up the condition to show a different text with a different font awesome icon upon hover
I am not talking about the icon or text. I am talking about the cursor.
This little thing:
I see. The hand comes about when that element has a start workflow action on it. If you do not want any actual action but do want the hand upon hovering … then … a hack could be to just create an action on that button that does not do anything material … e.g. set a state and do not assign any value to it
Oh, I see, that makes sense. I have not set up an action for it yet, it’s good that it changes automatically then. Thank you
Icons can be added to the button review the post
It’s a shame that adding [fa]…[/fa] in a button doesn’t work as it does in a text field…
By the way, I personnaly add an emoji which is very simple. But, sometimes, I don’t find the good one.
There are good workarounds here. But they’re workarounds. Just allowing BBCode in buttons would be a huge step forward.
Yeah, I hope Bubble implements it!
More people should comment on this post
