Any idea when Font Awesome 5 will be supported @emmanuel?
12 Likes
+1 for Font Awesome 5
2 Likes
+1 for FA5
1 Like
+1 here too!
1 Like
+1 from me 
+1 from me!
+1 from me too for native support.
I did manage to get it to work for my use case by adding the FA style sheet link to the header of my app in Settings->Seo/Metatags and it seems to work fine so far.
I can use the 5.2.0 icons like (air freshener was released in 5.2.0):
[fa]air-freshener fa-2x[/fa]
<i class="fas fa-air-freshener"></i>
7 Likes
Just out of interest, why don’t you guys consider downloading SVG icons from thenounproject.com and simply pasting the code into HTML elements? I do that, actually I’ve saved them in a table so I make a call to the table initially (SPA app) to load them into hidden texts (acting as variables) and then simply refer to the variable in my icon HTMLs. But, now I wonder if I’m doing something that might have performance implications.
1 Like
Font Awesome 5 would be great. I have a Pro License and can create images or use html elements, but icon element support would make the whole thing easier.
I may try this approach. Are you saying you create a Data Type for your icons and load them into a hidden repeating group and reference them from html elements?
I’ve been out of commission for about four months @subtlemonsters so I’ve forgotten the bubble vocabulary and I’m not sure if I understand your question correctly so I’ve pasted screenshots below to show you what I’ve done. It works really well and there are hundreds of thousands of icons specified in HTML available, even multi-coloured and animated if you want that.
I also use the approach for brand colour hex values and that allows me to white label rapidly because when a user logs-in I just refer to that organisations icons and colours stored in the data tables.
First I set up a Data Type/Table that has two fields (1) Name and (2) HTML
After that I tried two approaches and because bubble is so smart about performance I can not detect any difference so the choice of approach is probably personal.
(1) In the first scenario I created a hidden text or input element of width=1 and height=0 and I called it a variable (old habits die hard).
Then every time I wanted to display the icon, I placed a HTML element on the page and set the HTML editor to point to that variable’s value.
but …
(2) bubble is smart enough about performance that you don’t need the variable element. Now what I do is simply have the HTML element make a call directly to the data table and bubble is smart enough to remember if it has already made that call so it does not do it again. That means you can eliminate the hidden variable elements … it’s easier on the brain.
You will also notice in the screenshot above that I use a Find and Replace. This allows me to change the hex color of the icon as required. So when saving icons to my Data Type, I set the hex color code to #000 then I find and replace with my desired hex code, or with a call to the brand colour’s data table if required.
This approach not only gives me access to endless icons, it also is very dynamic because it allows me to change an icon, or colour, in one place and know it will be changed everywhere.
Hope this is clearer. If not reach out again.
9 Likes
Thanks so much! Font Awesome is great, but there are some limitations obviously. I am developing my first app and was thinking thru how to tackle the eventuality of needing other icons and if it was possible to apply colors dynamically. Then I saw your post and thought I understood it (not quite). This thorough explanation is great. Your method also leaves open the possibility of creating an interface to add icons as well, which may be useful in my case.
Thanks again!
Ian
I would also like native Font Awesome 5 support, but it seems like a pipe dream at this point lol.
a year later… what’s the latest on Font Awesome and/or best practices for a large library of icons?
Most Bubblers seem to be using SVG icons and HTML elements (see my reply above). This means you are only loading what you need not a full set of icons and SVG is standard everywhere now thanks to its tiny size. Is there a reason you specifically want Font Awesome?
@patricia just looking for ease of use. Bubble already has Font Awesome integrated so it seems worth an upgrade, but anything equivalent and easy to use would be fine. Is your solution easier to use than it seems? Do I have to manually go hunt for HTML and cut and paste into my own database?
First thing is to drag a simple bubble HTML element onto the page and size it to your desired size. If you want to be able to click on it, put it in an empty Group usually about 44x44 so it is a good click size and you can set the click workflow on the Group.
Then a Google search will quickly give you SVG icons. Personally I have a subscription to thenounproject.com so I grab all mine from there because I know they are clean. Sometimes some SVG files can be a bit problematic so better to get them from a reliable source. The only thing I do is open the SVG file in a text editor and change the width=“999px” height=“999px” to width=“100%” and height=“100%” that way your SVG will self adjust to fill the size of your HTML element. You can also change the color of the icon by looking for the hex value in the file but I usually do that in thenounproject.com before I even download it. Then paste the SVG into the HTML element (or you can put it in an Option Set (I have an Option Set called AppIcons for that purpose) or save it in a text field in a data table and insert a dynamic link to the Option Set or DB in your HTML.
It actually is really easy. Do it once and from there you will never go back. The sheer range of icons is simply unbelievable.
7 Likes