Button with icon and text

I’ve seen a few people ask how to have a button with an icon and text like below.

icon image

  1. Insert normal button
  2. Right click on button and choose ‘Group elements in a group’ (this keeps the button and the icon together in a group
  3. Add a text element and centre vertically, but instead of text, put the fontawesome code such as [fa]arrow-right[/fa]

You can change the text and icon sizes and colours by creating a new style for each.

You should use the text element for this. Text element can have background and order just like button. So no need to use button.

Yes you can, but the issue with that is a text button won’t trigger an event when the user clicks the return button so it doesn’t ‘feel’ like a button.

plus a text element is bad for a11yproject.com and overall accessibility

Drag a button element and give an id to it.
eg. BtnAdd
now use html element and write code below

hey thanks for this, i feel this is the wields the least hacky results. is there a way i could style the button text with this also? for some reason i can’t find the button classes in the inspector :confused:

Which solution are you going with from above? With my solution you would simply got o the buttons edit panel and change the text.

this one.

it’s a bit to setup, but once done, it behaves like a proper button w/icon. the other methods don’t allow you to respond if you click on the icon itself (unless you create a separate workflow for the icon). also, styling the text of the button also styles the icon which is handy.

That’s true.

How do you adjust the size of the icon @patelonline9?

Better say who you are directing your question to as there’s been a few solutions I think.

@darren,james7518 - can you give clearer instructions please? I don’t have the option when right clicking on a button to ‘group elements in a group’, I have group elements in a fixed container, row container, column container or align to parent. Thanks.

You can copy from here public24022023 | Bubble Editor