How solve flickering Font Awesome Icons?

In my solution I download font resources to server

  • http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.min.css - save in path "css"
  • http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.eot - save in path "fonts"
  • http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.ttf - save in path "fonts"
  • http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.woff2 - save in path "fonts"
  • http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.woff - save in path "fonts"
  • http://fortawesome.github.io/Font-Awesome/assets/font-awesome/fonts/fontawesome-webfont.svg - save in path "fonts"

But even than still happened - Chrome and Firefox too.

For that is there font type "woff2". I add new webserver handler:

for #iis add

C:\Program Files\IIS Express\AppServer\applicationhost.config
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />

and for #nginx add (see how Mime type for WOFF fonts?)

/etc/nginx/mime.types || or /usr/local/nginx/conf/mime.types
font/woff2 woff2;

Mime types by Mozilla.

Now font icons are loaded fast like images.

I hope this helps someone.


My solution was to add @font-face directly in the <head> tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style name="FontAwesome">
        @font-face {
          font-family: 'FontAwesome';
          src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot');
          src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
               url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff2') format('woff2'),
               url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff') format('woff'),
               url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.ttf') format('truetype'),
               url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.svg?#fontawesomeregular') format('svg');
          font-weight: normal;
          font-style: normal;
        }
    </style>

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css}" rel="stylesheet">

This what Google do in Youtube and other websites


I had the same issue and it appeared that I have included the FontAwesome stylesheet twice and after removing one of them the problem was gone.

Tags:

Css

Fonts

Cdn

Webfonts

Font Awesome

Recent Posts