How Can I Hide Font Awesome Placeholder Icons Until the Font Loads?

Determining Font Load Status for Icon Display

Problem:

When utilizing Font Awesome, icons initially display with placeholder characters until the font files are loaded. To address this, the task is to conceal these placeholder icons during the loading process.

Solution:

To detect font file load status, leverage the jQuery-FontSpy plugin. This plugin evaluates font width discrepancies between the desired font and an arbitrary fallback font. If the widths match, the desired font remains unloaded; otherwise, it has successfully loaded.

Plugin Implementation:

1. Include the jQuery-FontSpy script:

<script src="scripts/jquery-fontSpy.js"></script>

2. Initialize plugin on the desired element:

$('.icon-container').fontSpy({
  onLoad: 'fa-loaded',
  onFail: 'fa-not-loaded',
});

3. Define the styles for loading and failure states:

.fa-loaded {
  display: block;
}

.fa-not-loaded {
  display: none;
}

With jQuery-FontSpy, the icons will initially be hidden. Upon font load, the 'onLoad' class is applied, unhiding the icons. If the font fails to load, the 'onFail' class is applied, keeping the icons hidden. This plugin provides precise control over the icon display, ensuring an optimal user experience even before the font has loaded completely.

The above is the detailed content of How Can I Hide Font Awesome Placeholder Icons Until the Font Loads?. For more information, please follow other related articles on the PHP Chinese website!