Hello!
Atm I am building & designing the app, so i was wondering where is the best place to get icons?
ideally, I want to be able to regulate the colours
There are icons such as material icons, ionic icons and they work great but how would I go around it, if I want to add icons to menu items and have it in my database?
Thank you! Really need clarity with this 
If you want to store icons in your database or in option sets one way is to use Font Awesome icons (as Bubble has this built in as standard - although I’m not sure which version), stored in a text field as bbcode.
For example [fa]user[/fa] for the user icon, or [fa]calendar[/fa] for a calendar icon etc.
That way you can change both the size and colour dynamically on the page in the text box.
Alternatively you can of course store them as images (.svg for best results), such as can be downloaded from Icons - Material Design - but they will be whatever colour the image file is and won’t be able to be changed dynamically.
Thank you so much for your reply!
Not sure I quite understand where to get those icons, and how do I exactly get this bb code?
So I need bb code and input it into database as text field? And how would I show it? As html or smth else?
Thank you
Just store it in a text field in your database or option set.
the bbcode is [fa]icon_name[/fa]
You can get the icon names either directly from Font Awesome’s website - but they are currently on version 6 of the library and I think Bubble only uses version 4, so not all of their icons will work.
Or (to make sure you only use Bubble compatible ones) you can use the default Bubble icon element to find the icon you want to use, then the name of the icon will appear in the top of the element inspector: ‘fa-icon_name’ - you don’t need the ‘fa-’ only the name itself.
So in the above example the bit you need is just ‘home’
Then put that between the [fa] [/fa] tags in your text - e.g. [fa]home[/fa] and store it in a text field in your database:
Then you can refer to that item’s icon field in a text element on your page, and the icon will display:
You can set the font size, and colour in the property editor (either with a static value or dynamically) as you would any other text.
you are my hero thank you so much!!!
I managed to figure it out.
Are there any other options? Is it possible to use ionic or material icons this way?
As far as I know this only works with Font Awesome icons, but I could be wrong, so might be worth investigating.
I had no idea these worked inline, thank you Adam. Learn something new every day.
I like using TheNounProject.com for when I have an icon need that I can’t find on font awesome. I have the pro version, but the free access is not too bad either.
This topic was automatically closed after 70 days. New replies are no longer allowed.
