Adding an Icon in Database Editor

Hello! I am going to give away my lack of experience but I am trying to add an icon to the Modify and Existing Database field “Icon”, and I am not sure how to do it. Any help or guidance would be very much appreciated!

When you say an Icon, do you mean one of the small images that Bubble have in your editor?

What ‘Type’ is your Icon field?

Yes, exactly!

Hmmm… I am not sure what you mean (it’s me, not you). What do you mean by Type?

Ok, so I am going to guess that you want a certain icon to be displayed for a certain user? (Sorry I am just trying to understand your usecase to make sure what I say is right)

All Data has a type (text, date, number, image, yes/no, Custom Datatype etc.)

So what Type is you Icon field? (I’m guessing it’s ‘Text’)

Also, how and where are you displaying this Icon field?

Thanks! I don’t want an icon displayed for a specific user, I just need to change the icons in these little pink circles.

Got it! Ok, it’s text! And I have tried just typing the name of the icon I want into the Icon field, but it doesn’t work when I do that-meaning the icon won’t appear. For example, if I want a question mark as an icon, I have typed “question”, but the only thing that shows up is the q for question. The icons are displayed here:

Ok brilliant, and this is a repeating group that you are using to display the info?

What I would do if I were you, is use conditionals to chanage the icon depending on what is in the repeating group.

For example. On the icon itself, you say "If current cells database input is “Quizzes” then icon is [choose icon you want]… Rinse and repeat

Thanks so much! Giving this a try now-I really appreciate your help!

You can follow the icon approach with conditionals above or you can use the “fa codes” (Font Awesome).

Bubble’s default icons are of this type. If you insert an icon element into the editor and modify the icon, you will see that the name of the element will be its “fa code”.

The name of the default icon, e.g. it’s “fa-bars”.

Therefore, if you have a text field in your database, you can save the “fa code” of the desired icon. In the default icon example, remove the “fa-” prefix and save the code like this [fa]bars[/fa]. Where “bars” is the icon code without the “fa-” prefix. Thus, if you are using a Repeating Group, you must use a text element (only possible with a text element) to return the code of the current cell. If you’ve done everything right, the icon will appear.

Note: some icons have a long name that sometimes gets cut off when inserting into the editor. So check out the Font Awesome documentation.

In four seconds you explained to me something seemingly simple but which I was dancing around. Thank you.

Hi ! Has anyone found a way to do that with the new icon system? Thank you