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.

6 Likes

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

3 Likes

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.

1 Like

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

1 Like

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

4 Likes

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.

1 Like

@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