Pourquoi mes icônes apparaissent comme des carrés vides?

J'ai créé un nouveau (simple) site web dans IIS8. J'ai créé un simple Index.html et de mettre en jQuery, Bootstrap3 et font-Awesome 4.0.0 pour commencer à jouer avec.

Cependant mon Font-Awesome icônes sont affichées rien (places):

Ma structure de dossier est

/
  - 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

Mon Code HTML:

<!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 est:

@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 montre que non .woff fichier (ou autre) est encore téléchargé (n ° 404)

Pourquoi mes icônes apparaissent comme des carrés vides?

J'ai essayé

IE 11, Firefox, Chrome
De mettre le site sur un serveur en ligne
De changer le type MIME .woff à
- font/x-woff
- application/x-font-woff
- application/font-woff
- font/woff
Plein d'autorisations de lecture pour l'Application de la Piscine
Modification de l'url() de la @font-face de ../fonts/ à fonts/
De supprimer tous les autres inutiles, les fichiers css et js
Pleine page se rafraîchit, effacer la mémoire cache

OriginalL'auteur Rowan Freeman | 2013-10-26

26

J'ai passé des heures sur ce (trop nombreux à admettre).

Le problème est que ce code:
```

```
Manque un autre fa dans la classe. Il doit être:
```

```
J'ai appliqué de cette façon, mais il y a encore un problème. :/
 ne marche pas encore!
vous devez importer ce ainsi @import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
je suis tombé tellement stupide maintenant, lol

OriginalL'auteur Rowan Freeman
2

Juste eu le carré blanc problème, mais ce n'était pas le problème avec mon balisage. Je suis en utilisant wordpress, avec un des commentaires sociaux plugin qui utilise le même id que mon fa icônes étaient situés dans des, et le plugin css a remplacé la police-famille. Donc, si votre classe est correct, assurez-vous qu'aucune autre classe est détournements de votre police-famille.

OriginalL'auteur Mike

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

de l'importer sur votre police génial CSS.

OriginalL'auteur Obelisk Blue

0

Ive vient de corriger un problème similaire - les icônes indiquant que des carrés - avec l'aide de Mikes réponse. S'avère que j'avais une autre instance de FontAwesome être chargé et cela a été à l'origine de problèmes. Quand j'applique la famille de polices 'FontAwesome" au lieu de "Police Impressionnant Gratuit 5' cela résout le problème. Plus précisément mon problème a été rencontré lors de l'exécution du Thème de Recherche de Produits avec Avada Thème sur WordPress.

OriginalL'auteur RobW
0

Assurez-vous que votre i éléments ont cette css style:
```
i {
    font-family: FontAwesome;
}
```
OriginalL'auteur Eric Amshukov

Vous devez vous connecter pour publier un commentaire.