Font Awesome 5 support

[ryanck]

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

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

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

Nice approach

[chad]

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

[patricia]

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]

@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

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]

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]

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.

1. 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.

2. 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.

3. 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]

@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

[shu.teopengco]

Hi, how do you save this bootstrap icon?

[darius]

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

File text

[gotobits]

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]

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]

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

[legooo91]

Still no news 4 years later?

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