Why do my icons show up as blank squares?

StackOverflow https://stackoverflow.com/questions/19609116

Pregunta

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
¿Fue útil?

Solución

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>

Otros consejos

@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

import this on your font awesome CSS.

Just had the blank square issue, but this was not the problem with my markup. I'm using wordpress with a social comments plugin which used the same id as my fa icons were located within, and the plugin css overwrote the font-family. So, if your class is correct make sure no other class is highjacking your font-family.

Make sure your i elements have this css styling:

i {
    font-family: FontAwesome;
}

Ive just fixed a similar problem - icons showing as squares - with the help of Mikes answer. Turns out I had another instance of FontAwesome being loaded and this was causing issues. When I apply the font family 'FontAwesome' instead of 'Font Awesome Free 5' this fixes the issue. Specifically my problem was encountered when running the WooCommerce Product Search with Avada Theme on Wordpress.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top