Support for Icons as Text - BBCode + Font Awesome

Idea Implemented
21

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
22

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

Are we going to see this in bubble?

2 Likes
23

+1 for a quick update

24

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

Thanks!

25

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

26

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

27

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

image.png1042×448 27.4 KB

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:

image.png1260×1024 47.5 KB

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

image.png1006×364 23.7 KB

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

image.png1096×518 37.2 KB

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!

4 Likes
28

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

Thanks

29

Thanks @emmanuel

30

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!

31

Which one isn’t in the picker?

32

One example is fa-group. There are many missing though, when compared to http://fontawesome.io/cheatsheet/. Thanks!

33

Another example: graduation-cap.

34

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

image.png990×408 24.3 KB

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

image.png974×390 22.7 KB

2 Likes
35

Great - thank you @fayewatson :slight_smile:!

1 Like
36

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.

Thanks!

1 Like
37

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]
or
[fa]home fa-3x[/fa]
or
[fa]home fa-4x[/fa]
or
[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]

8 Likes
38

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

39

Is it possible to do the same with another font?

It would be great to use another set of icons.

40

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

fa-user-shield

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