Font Awesome 5 support

marcuslate · 2019-02-05T00:58:36.039Z

I would also like native Font Awesome 5 support, but it seems like a pipe dream at this point lol.

eric1 · 2020-04-15T17:37:31.781Z

a year later… what’s the latest on Font Awesome and/or best practices for a large library of icons?

patricia · 2020-04-19T18:41:58.948Z

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?

eric1 · 2020-04-21T08:30:26.800Z

@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?

patricia · 2020-04-21T10:33:32.810Z

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.

ryanck · 2020-05-02T11:40:49.322Z

patricia:

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.

That´s clever.

patricia · 2020-05-05T10:05:41.499Z

@ryanck the bonus in the Option Set SVG icon approach is that when displaying the icon you can Get an Option: AppIcons: MyIcon:find & replace and replace #000000 with whatever colour you need based on your primary colour or the status of the icon (enabled, disables, pressed). In fact I tend to replace the color embedded in the SVG with #color then I search for that and replace accordingly.

ryanck · 2020-05-05T10:08:00.179Z

I guess you´re inserting the SVG code in the Options sets instead of uploading the icon itself?

Nice approach

chad · 2020-06-03T08:39:54.949Z

This is great, when loading them into option sets does that mean that all the icons load every time?

patricia · 2020-06-03T10:44:02.771Z

It appears so. It makes things really smooth. New reason to be installing icon plugins with their hit to load time and their loading icons you don’t use. Much better all round to use SVG and Option Sets as far as I can tell.

darius · 2020-06-15T04:08:36.406Z

@patricia

Very interesting discussion.

I was just curious…what is the difference between storing the SVG Icon HTML, as opposed to the SVG Icon Images?

I can only see an advantage of storing the HTML (in allowing you change the colour dynamically through regex/hexcode), but then I see the below type article where the images are being stored as an option set?

Option Sets Images Question

I am wondering about the use of option sets and images. I use a lot of SVG images as icons to have some custom icons for my apps. I previously used data types to store them, as they are usually connected to ‘options’ users would have on products such as product type. Recently I did a quick and dirty test by having a set of 50 in an R.G. load as a data type and compared that to the load speed of the same 50 as an option set. The option set was hands down faster, like about 4 seconds faster. No…

Trying to decide which approach is better for me to go with.

Many thanks in advance!

lucas.ar · 2020-06-15T05:58:58.071Z

Ok but you are calling the database in order to render A Page with a static asset (the image that it supposed to be the same at 99.9% of times)
I understand ut works, BUT I do not know what is the official bubble policy regarding this methodology.
However calling a database is always expensive in terms of performance And performance is not optimal in bubble.

boston85719 · 2020-06-15T06:32:21.874Z

I just tested @patricia method of storing the HTML, something I never knew was possible, and from my experience using the method of storing the icon SVG the HTML has many benefits.

You don’t need to download all the different colors for the icon. When I have a need for a ‘hovered’ ‘pressed’ ‘not clickable’ etc. color for the icon, I need to change the color in thenounproject and download each as a separate SVG file and then upload them as separate images.
Changing the color of the icon using the HTML method is quick and easy with the find and replace value. You could go so far as to have a ‘stored’ value to replace to making things even easier to change the color scheme in an entire app instantly.
I don’t know for sure, but my assumption is the HTML element load is quicker than an image element load and won’t cause an issue with speed. I often get warnings in the debugger about too many image files slowing down performance, despite the SVG file being very small, it still seems to throw an issue into the mix.

One downside is the time required to download and then open in a text editor, but that is a tradeoff with the time required to change colors in thenounproject, download and upload multiple of the same icon with different colors.

One benefit you could experience from option sets as an svg and calling them through an image element is found in SEO as you can place alt text onto the image element and use text values on the option set for storing them. I don’t know how much it improves SEO but my assumption is every little bit helps.

***as a side note, I will probably at some point go through and change my app around to use the HTML method for most areas of my app when the SEO benefit is not necessary, such as arrows etc. Other areas where the icon represents a keyword on the page, I will continue to use the SVG method.

darius · 2020-06-15T07:09:28.495Z

@boston85719

Thanks for your insightful post.

Yes, agree on the html points - have been exploring this afternoon and very interesting method.

Regards to your time point, I don’t know if a good approach but I’ve been playing around with bootstrap svg icons in the last hour and the html code is readily available…saves messing around with an editor, although I’ll let someone else comment if what I’m doing is a poor approach.

The library is open source:

icons.getbootstrap.com

Icons

Official open source SVG icon library for Bootstrap

shu.teopengco · 2020-06-15T12:16:35.486Z

Hi, how do you save this bootstrap icon?

darius · 2020-06-18T06:31:31.442Z

If you go here you can find the html to add to your database, then display using the html element:

icons.getbootstrap.com

File text

Official open source SVG icon library for Bootstrap

gotobits · 2020-12-29T06:03:44.233Z

One way to add the free Font Awesome 5 icons is by adding an invisible html element anywhere on the page containing the following line of code:

<script src='https://use.fontawesome.com/releases/v5.15.1/js/all.js' type='application/javascript' ></script>

you can then use the standard referencing in other HTML elements on the page, e.g.,

<i class="fas fa-file-upload"></i>

and style to your preference; this approach makes it easier when iterating designs and not sure which icon you want before finalizing to the embedded or option set SVG approaches mentioned above.

The JS src ref will of course need to be changed if you want FA 6 when released.

ts11 · 2021-01-04T21:17:20.216Z

Howdy, folks Curious if anyone in this thread has thoughts on how the whole SVG/Option Set approach compares to using an API-based approach (i.e. Iconify or one of the other existing dynamic icon plugins) in terms of performance. @patricia what do you think?

lancegerarrd · 2021-09-30T13:33:29.152Z

I can’t find width and height when I open SVG in notepad. How do i get it?

legooo91 · 2021-12-28T13:53:46.908Z

Still no news 4 years later?

The problem of using frontawesone, with <script … all the bubbles icons it’s not working