Why do my icons show up as blank squares?

Question 1

Why do my icons show up as blank squares?

css font-awesome iis-8 woff font-awesome-4

Rowan Freeman · Oct 26, 2013 · Viewed 19.2k times · Source

Answer

Answer

I spent hours on this (too many to admit).

The problem is this code:

<span class="fa-user"></span>

Missing another fa in the class. It should be:

<span class="fa fa-user"></span>

Question 2

I've created a new (simple) website in IIS8. I've created a simple Index.html and put in jQuery, Bootstrap3 and Font-Awesome 4.0.0 to start playing with.

However my Font-Awesome icons show up as nothing (squares):

Demo image

My folder structure is

/
  - Index.html
  - bootstrap.css
  - bootstrap.js
  - jquery-2.0.3.js
  /css
    - font-awesome.css
  /fonts
    - FontAwesome.otf
    - fontawesome-webfont.eot
    - fontawesome-webfont.svg
    - fontawesome-webfont.ttf
    - fontawesome-webfont.woff

My HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Site</title>

    <link rel="stylesheet" type="text/css" href="bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="slate.css" />
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
</head>

<body>
    <div class="container">
        <h1>This is a test</h1>
        <h1>User Icon: <span class="fa-user"></span></h1>
    </div>

    <script type="text/javascript" src="jquery-2.0.3.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
</body>

</html>

Font-Awesome @font-face is:

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

Chrome shows that no .woff file (or anything) is even downloaded (no 404 either)

Chrome network

I've tried

IE 11, Firefox, Chrome
Putting the site on a live server
Changing MIME type of .woff to
- font/x-woff
- application/x-font-woff
- application/font-woff
- font/woff
Full read permissions to the App Pool
Changing the url() of the @font-face from ../fonts/ to fonts/
Removing all other unnecessary css and js files
Full page refreshes, clearing cache

Why do my icons show up as blank squares?

Answer

Related questions