FontAwesome showing squares, not icons

2
votes

My webpage is now showing squares for the icons, not the icons itself.

I had the same page Page1.html (I "copy-pasted" the code to Page2.html), and Page2 is showing squares (with some characters inside ...), instead of icons.

Well, I checked the console of Page2, and here's what I found:

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: file:///D:/My Files/dist/font-awesome-4.4.0/fonts/fontawesome-webfont.woff2?v=4.4.0 font-awesome.min.css:4:14

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: file:///D:/My Files/dist/font-awesome-4.4.0/fonts/fontawesome-webfont.woff?v=4.4.0 font-awesome.min.css:4:14
downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:3): bad URI or cross-site access not allowed source: file:///D:/My Files/dist/font-awesome-4.4.0/fonts/fontawesome-webfont.ttf?v=4.4.0 font-awesome.min.css:4:14
downloadable font: no supported format found (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:5) source: (end of source list)

Example of code using FontAwesome:

<ul class="navbar-nav">
  <li>
    <a href="Home.html"><span class="fa fa-home"></span>Home</a>
  </li>
  ...
</ul>

I didn't modify anything on any FontAwesome files.

Could this be the normalize.css, or any other stylesheets included in the webpage?

UPDATE:

So, Page2 is in a folder in the same level as Page1:

Page1: My Files/Page1.html

Page2: My Files/includes/Page2.html

... and my CSS Files: My Files/dist/ (CSS Files)

Now, I moved Page2 in the same folder as Page1, edited the <link href="" parts of Page2, and the icons work as expected.

What could be the problem here? ...

  • Thanks, in advance! :)
2
htmlcssfont-awesome
Usually this happens because the .woff2 extension is not served as file by the server. So a configuration issue. – maraca
@maraca is right. You should work with server. (e.g) localhost:3000 – hdotluna
@maraca That would be relevant if this was being run from a webserver, but the error messages make it more likely the pages are being viewed via the file:// protocol. – Tieson T.
Are both pages in the same folder? I would suggest including the markup for the head for each page, in your question. – Tieson T.
Run a server, please! – user6820627

2 Answers

1
votes

The squares show up because of missing fonts. This also showed up when you checked page 2 console.

As @maraca and @Herm suggested, you'll need a server to access font-files. This is because a MIME type header is needed to interpret .woff files. More about this here : Mime type for WOFF fonts?

By starting a simple server, this mime type will be added automatically and the fonts will be served.

To start a server, you can use python :

python (version 3+)

$ python -m http.server

python (version 2+)

$ python -m SimpleHttpServer

This will start a server in current directory.

--

No this is not an issue being caused by normalize.css. It can be cause by another stylesheet only if it overrides font-family. But your case seems to be a header issue.

0
votes

I had the same problem, the font was loaded but still getting the squares, it happened randomly so it was very difficult to reproduce. I checked and the font was loaded, some icons that wore added later wore correctly displayed.

I tried to do several things and I ended up discovering that if I change the font-size it will force the browser to redraw the icons showing them properly.

This piece of code will change the font size of every .fa element by adding 0.01 "units" to its size.

<script>
// Enforce font redraw to avoid square icons 
$(document).ready(function(){
    setTimeout(function(){
        var els = $('.fa');
        for (var i=0; i<els.length; i++) {
            var fs = $(els[i]).css('font-size');
            var un = fs.replace(/[0-9\.]*/, '');
            var val = fs.match(/[0-9\.]*/)[0];
            fs = (fs.indexOf('.') > -1 ? val + '01' + un : val + '.01' + un);
            els[i].style.cssText = els[i].style.cssText + '; font-size: ' + fs + ' !important;';
        }
    }, 2000);
});
</script>