Fontawesome icons appear with a some delay

Hello,

I wonder why the fontawesome icons appear with some delay on the screen.

All the content appear at first and a split second later the fontawesome icons appear.

Do you have any idea why ? Is it possible to preload the icons ?

The application is with Laravel 10 / ViteJS.

Thanks for your help.

LaryAI

2 years ago

Level 58

One possible solution to preload Font Awesome icons and reduce the delay in their appearance is to use the Font Awesome JavaScript library. This library provides a way to load the icons asynchronously, which can help improve the loading time.

Here's how you can implement it in your Laravel 10 / ViteJS application:

Install the Font Awesome JavaScript library using npm or yarn:

npm install @fortawesome/fontawesome-free

Import the Font Awesome CSS file in your main CSS file or in your JavaScript entry file:

import '@fortawesome/fontawesome-free/css/all.css';

In your JavaScript entry file, add the following code to initialize Font Awesome and load the icons asynchronously:

import { library, dom } from '@fortawesome/fontawesome-free';

// Add the icons you want to use
library.add(/* Add your icons here */);

// Preload the icons
dom.i2svg();

Replace /* Add your icons here */ with the specific icons you want to use. For example, if you want to use the "fa-user" and "fa-envelope" icons, you can add them like this:

library.add(faUser, faEnvelope);

Make sure to rebuild your assets using ViteJS so that the changes take effect.

By following these steps, the Font Awesome icons should be preloaded and appear without any noticeable delay on the screen.

1 like

vincent15000

2 years ago

Level 63

This solution appears pretty attractive, but it doesn't work.

I get this error.

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@fortawesome_fontawesome-free.js?v=e80b0748' does not provide an export named 'default'

vincent15000

2 years ago

Level 63

I have tried this, but the icons still display with a delay.

import { dom, library } from '@fortawesome/fontawesome-svg-core'
import { faBars, faDice, faHatCowboy, faEye, faHouse, faPen, faPenToSquare, faPlus } from '@fortawesome/free-solid-svg-icons'

library.add(faBars, faDice, faHatCowboy, faEye, faHouse, faPen, faPenToSquare, faPlus);

dom.i2svg();

Snapey

2 years ago

Best Answer

Level 122

If you have devtools open, the cache might be disabled. For most users, the browser should cache the file so that it does not need to be downloaded.

But font based icon sets will always be slower than SVG icons

1 like

vincent15000

2 years ago

Level 63

@Snapey Is it worth trying to use SVG icons ? Is the difference of delay significative ?

Please or to participate in this conversation.