Forum Academy Marketplace Showcase Pricing Features

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.

1 Like

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 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.