What's the most performant way to ensure font-awesome icons show up?

Need help Responsiveness
1

I believe the way to make sure font-awesome icons show up in text fields is to include a (1x1px) icon above it on the page.

Does anyone know the details? Our font-awesome icons load sometimes even though an icon isn’t on the page. But, that’s not true on others.

Should I be loading an icon on every page to prevent this? I presume it’d be smarter to add a 1x1px Reusable element in the header. This way, it’s the same on every page and minimizes compute time.

How are you solving this problem today? Any ideas for more performant solutions?

1 Like
2

I know you know this, but just to make it clear for others:

If you use the icon element to display a Font Awesome icon, the FA font should be loaded and your icon will always display in that way.

However, if you are embedding FA icons via bb code in a text element, the font needs to be loaded (i.e., you need to do something to ensure the font gets loaded). So, the two things you can do are:

  1. as you suggest, include an icon element on the page to ensure loading.

  2. you might also just include the CSS or script to load the font in the page’s own HTML header

Is 1 less performant than 2? Possibly (due to element). By a lot? Probably not.

Is your use of FA icons embedded via bb code in text elements so common that you should have every page load the FA font (regardless of whether you need it or not) out of convenience, even though that will in some cases slow load times for pages that don’t require it?

If so, then you could include the font loading in your global HTML header (in app settings) OR include the mini icon hidden in header (or some other reusable found on every page).

Unless I’m missing something those are basically the parameters you’re dealing with and the solutions available to you in this case.

Regards,
Keith

4 Likes
3

Do you know whether it gets cached at all on the client? Seems a bit odd to have to load the FA code on each page.

4

Well yes modern browsers will cache and do what they need to do vis-a-vis loading, but if you don’t load the font the page(s) will not reliably work correctly. (You cannot guarantee an asset is available except by making it available. Consider that you cannot truly control where a used lands first, or whether they - or the browser - decides to dump the cache, right?)

1 Like