Support for Icons as Text - BBCode + Font Awesome

Idea Implemented
1

Hello @emmanuel

One aspect in Bubble that i deal with daily is adding icons to buttons. Currently it’s not possible as it only supports text. So i got an idea that greatly improve the UI/UX

Add support to Font Awesome within the BBCode Editor. Also the ability for us to access the BBCode Editor in the button element so we can create and engage better with our users. Hey it beats having to deal with a group that has an icon and text in it separately then aligning, conditioning and animating it all

May i request that you consider this?

Link Unmaintained - Font Awesome Bb Code & its generator interface | XenForo community

Example

You can even animate it like this

More here

10 Likes
2

+1 to this. We also struggle with this all the time

Thanks,
Levon.

Founder at Bubblewits - Bubble Certified Partner

http://bubblestore.io – a place to buy Bubble templates for landing pages, e-commerce, workflows, APIs etc.
http://iambubble.com - one page Bubble demo
http://builtonbubble.com - Collection of apps built on Bubble

1 Like
3
    1. That would help saving a lot of time !
  • no need to make a group containing icon + text to get a good hover/pressed conditionnal formatting
  • speed up page load diminushing number of elements
  • for responsive parameter, still easier to setup one text element than three

and it would able us to quickly design better looking UI

1 Like
4

We just added this

Note that you need one font awesome element on the page for the font file to get loaded, and that you can’t use bbcode in buttons (but you can use them in texts and that does the same thing).

11 Likes
5

Thanks @emmanuel & Team I can’t be happy enough. lt is possible to have this in text field place holders?

3 Likes
6

That’s really great. I’m applying this and can delete many group + icon elements !

7

doc of Font Awesome here : http://fontawesome.io/examples/#list

animated, rotated, flipped icons work well, but @emmanuel I can’t make stacked icons work because the class=fa-stack must be apply to the both icons (see on the forumapp3). Is there a way to do it ?

8

No, BBcode in placeholder (with links, etc) would be a mess

9

That one with BBCode would be tricky unfortunately.

10

Hi @emmanuel, this feature has been really awesome/fun to use; thank you so much for adding it. I was wondering if it would be possible to have an option that would prevent the ‘Text Cursor’ from displaying when hovering over this ‘button’ (though it is built using the text element)?

So instead of this displaying on hover: , the hand cursor or arrow could display instead?

If it’s not possible since it’s actually a text I totally understand :slight_smile:

11

Well if a workflow is attached to the text it should be a pointer cursor no?

1 Like
12

Ahh, right! Yes, it does change with a workflow; I completely forgot that. Thank you!

13

@emmanuel
Don’t know if it would be easy, icons in the Slideable Menu would help for a better UI.

14

That’s going to be tricky for the conditions on the event though, if we use BBcode…

15

What in the world is bbcode?

16

en easy syntax

17

I guess we could enable BBCode, if people use it they should know what to put in the conditions on the workflows.

18

yes, it seems logic. Condition I use for these workflows is “contains…”. So it would still work

Another way easier for us would be having a table in the editor panel for each entry :
ID/ Icon / Name. Then in the workflow, we would select the ID of the entry, so the Name can be modified without breaking the workflow condition. Icon would be let empty or not.
That would need more work, of course…

19

full support for BBCode in Slideable Menu.

Also idea :
If bbcode not possible with links, would it be possible to add checkbox options such as : icon prefix & icon suffix, with dropdowns so we can select a Font Awesome icon ? Fixed-width style is good for it.
Im my apps, links with icons for better UI that I can’t replace by text elements are a very common use case.

20

Icons with just a one-word name like “exclamation” work just fine, but icons like “exclamation-ci” do not work. Am I doing something wrong? Thanks!