Allow the button element to use Font Awesome icons

Similar to how the Text element allow the use of [fa]user[/fa] BB Code to display Font Awesome icons by their ID, the Button element should do the same.

2 Likes

I agree.

We show font-awesome icons (cog spinning) on “buttons” to let people know we’re loading the next page. Currently, we use text elements that look like buttons for this because of this limitation. The challenge with that is user’s can’t tab to the “button” and click “enter” to submit. So, enabling font awesome icons on Buttons would be useful.

3 Likes

Hey guys, can this be done yet?

Nope.

2 Likes

Can anyone think of a workaround?

Because clearly nothing I’m doing is working:

DESIGN INTENT:
43%20PM

MY GARBAGE:
49%20PM

1 Like

How do you like these apples?

29%20PM

not perfect but getting there.

Is there no way to add blank space in a field that will not get taken out?

1 Like

I got it to work using this combination of insanity.

27%20PM

1 Like

The top image shows it in illustrator.

I included all the relevant images.

I drag the icon (as a picture) onto the button. That seems to be the only way to include an icon on a button

1 Like

You could use a text element (then no problem with FA) and style it as a button. Visually speaking nobody will be able to tell the difference with a regular button if you copy over every style/condition/transition.

This being said, I think you might not be able to use tabulation to navigate to such a custom-made button with your keyboard if it’s a text element instead of an actual button element (to be confirmed).

Use a group and with an image and text element in it or use a text element with a fa icon.

Any element can be clicked and therefore used as a button. Simply adjust the style properties to resemble the button you want.

That is no good practice for screen reading usage and general inclusive design

Hiya - I had this issue so I created a plugin to use font awesome icons with a bootstrap button - it might help someone (it’s free) https://bubble.io/plugin/iconbutton-1608513051989x510350859101536260 - shout if you spot any issues or want me to add anything to it.

any demo page ?

Hi Lucas - here you go: https://rymawby-plugin-testing.bubbleapps.io/

2 Likes