Search code examples
cssfontsfont-awesomecdnwebfonts

How solve flickering Font Awesome Icons?

if I using what is everywhere recommended - using CDN attachment for "Font Awesome" everytime flickering "on page load".

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

Q how prevent flickering?

Solution

  • In my solution I download font resources to server

    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.