如何最小化加载 Font Awesome 图标的延迟？

Question

I have linked the minified CSS of Font Awesome from Bootstrap CDN in a webpage. The problem is that the icons appear later than the rest of the page content after a visible delay.

What is the best way to get rid of this delay? (FYI, I have already included this CSS file above every other CSS and JS link in the head.)

Answer 1

The minified css would not make much of a difference in load time. That font awesome css file references the paths to external font files that will load in after the page loads. You can see the delay on font awesome's website: https://fortawesome.github.io/Font-Awesome/icons/

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

You could base64 encode the fonts and include them right in your site's css. This would substantially increase your site's css load time, but it would get rid of the flash. Although it might not work in all browsers and I would not recommend it.

You could try hosting the font awesome css and fonts directly on your server. The CDN might be the cause of the latency.

Answer 2

I resolved the issue by self hosting the icons, this is described at https://fontawesome.com/docs/web/setup/host-yourself/webfonts

Answer 3

Try to change url() to data-uri()

LESS:

data-uri('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), 

http://lesscss.org/functions/#misc-functions-data-uri