Support for Icons as Text - BBCode + Font Awesome

Hello Kenton, I just saw your post. The full name of the fontawesome icon sometimes gets cut off. For example, “exclamation-ci” is supposed to be “exclamation-circle”. If you do [fa] fa-exclamation-circle [/fa] that should work. :slight_smile:

1 Like

There has been a new update with additional icons under version 4.7

Are we going to see this in bubble?


+1 for a quick update

Is there a way to set the color of the icon? For e.g. [fa]check text-success[/fa]


Yes, you can use the rich text editor on the icon only, then adjust the color with a code :slight_smile:

Would you mind sharing some screen shots as I am not sure how to do that. Thanks.

Sure! In this example, I have a star icon and text:

Then I click ‘rich text editor’ in the bottom right of the text box. I want to change the color of the star, only, to blue so I highlighted that portion of the text and clicked blue:

After that is saved, the text will look like this:

If I want a different shade of blue (or any color), I can then change that hex number to anything such as:

In addition to color, you can also adjust sizing in the rich text editor if you ever need the icon to be slightly smaller or larger than the text that is next to it. :slight_smile:

*Alternatively, you can just type in the [color=#______][/color] manually without using the rich text editor, either way works!


@emmanuel Can you please look into upgrading the icons to version 4.7?


Thanks @emmanuel

I noticed that all the fa icons are not in the picker. Is there a way that these can be added please? I am referencing Font Awesome icons 4.7.0. If not, how can one of these other FA icons be referenced please? Thanks!

Which one isn’t in the picker?

One example is fa-group. There are many missing though, when compared to Thanks!

Another example: graduation-cap.

Hi :slight_smile: the labels are sometimes slightly different; the Group icon is called “Users” and Graduation cap should be there:

If you search through the regular icon library, it will show the element name at the top to use within text elements:


Great - thank you @fayewatson :slight_smile:!

1 Like

Awesome addition to Bubble.

Any chance we could get support for bb code + font awesome in buttons because text fields won’t submit when user tabs to them and presses enter, which is material UX problem imo.

Would also be great to get support for them them in links too because we have to use links so that search engines understand the linkages between pages which is one of the foundations for getting traffic via SEO.


1 Like

Just to extend on the icons for anyone looking for the info,

say your icon is [fa]home[/fa] then,

To resize:

[fa]home fa-2x[/fa]
[fa]home fa-3x[/fa]
[fa]home fa-4x[/fa]
[fa]home fa-5x[/fa]

To Animate Any Icon:

[fa]home fa-spin[/fa] - will spin as usual.
[fa]home fa-pulse[/fa] - rotates in 8 steps, looks better that rotate on things like the spinner.

To Rotate:

[fa]home fa-rotate-90[/fa]
[fa]home fa-rotate-180[/fa]
[fa]home fa-rotate-270[/fa]
[fa]home fa-flip-horizontal[/fa]
[fa]home fa-flip-vertical[/fa]


Is there a way to use this with font awesome 5 or will it require an update?

Is it possible to do the same with another font?

It would be great to use another set of icons.

If bubble can provide a list of available icons with its tag, it will be helpful, For example


is not available in bubble or i’m unable to find it