How solve flickering Font Awesome Icons?

Question

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?

Bruno · Accepted Answer · 2019-01-09T21:42:33.433

2

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.

edited Jan 09 '19 at 21:42

answered Apr 18 '16 at 23:24

Bruno

6,623
5
41
47

2

yes, because you can do it on shared hosting. Bad answer. Who cares about locahost – Grasper Jan 26 '17 at 21:17
1

@Grasper This solution is for one enviroment not all. I strictly build only on systems with full control. – Bruno Jan 28 '17 at 00:21
how is it useful if it's only you who can access it? Unless you have your own servers where you host your web. – Grasper Jan 28 '17 at 00:25
1

@Grasper if you have something valuable or solution please contribute. – Bruno Jan 28 '17 at 17:36
I bumped into svg instead of using font icons but it flickers too in chrome. – Grasper Jan 30 '17 at 16:33
@Grasper in my investigation this is because browser loading resources from another domain and therefore rendering delayed. – Bruno Jan 31 '17 at 18:36
What are the codes you've added to the nginx and iis? – Mohammad Etemaddar Apr 17 '19 at 09:38
@MohammadEtemaddar that is definition for #webserver to detect type of file – Bruno Apr 17 '19 at 20:12

score 2 · Answer 2 · answered Jul 21 '16 at 19:34

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 think it made it faster, But still flickers. – Mohammad Etemaddar Apr 18 '19 at 07:15 — Mohammad Etemaddar, Apr 18 '19 at 07:15

score 2 · Answer 3 · answered Jul 04 '17 at 22:15

2

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.

answered Jul 04 '17 at 22:15

Eduards Vigulis

51
1
7

score 0 · Answer 4 · answered Mar 19 '20 at 16:38

0

I switched from using Web Font to SVG. Cured the problem.

answered Mar 19 '20 at 16:38

Tony Girling

1
2

thx for workaround - I think it may be the same bahaviour - local vs cdn – Bruno Mar 21 '20 at 10:59

How solve flickering Font Awesome Icons?

4 Answers4