Fontawesome ne fonctionne pas lorsqu'il est servi par IIS

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

Question

FontAwesome ne fonctionne pas pour moi lorsque je mets mon application sur le serveur IIS7.

Dans Firefox, l'URL demandée est codée en http://l2etest.kema.intra/fonts/fontawesome-webfont.ttf%3Fv=4.0.3 et j'obtiens 404.Quand je change %3F à ? tout fonctionne bien.

La même chose se produit dans IE, mais la requête est adressée à la police eot.

Voici ce que j'ai en CSS (comme sur la page FontAwesome) :

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

Je pense que le problème est que IIS code les URL et au lieu de demander ../fonts/fontawesome-webfont.eot? la demande est adressée à ../fonts/fontawesome-webfont.eot%3F.

Veuillez ne pas suggérer de retirer «? ou «#» des URL.Ils sont là exprès et sont indispensables.La question est de savoir comment faire en sorte qu'IIS ne code pas les URL de cette manière.Tous les indices seront appréciés.

Modifier:D'ailleurs.la situation ci-dessus se produit lorsque dans web.config je définis requestValidationMode et requestPathInvalidCharacters :

<httpRuntime shutdownTimeout="360" maxRequestLength="102400" enable="true" requestValidationMode="2.0" requestPathInvalidCharacters="" />

Sans cela, j'obtiens 400 (Mauvaise demande) :Une valeur Request.Path potentiellement dangereuse a été détectée auprès du client (?)

Comment puis-je réparer IIS pour qu'il serve correctement la police ?

Modifier2: OK, j'ai trouvé la cause du problème.L'outil de regroupement SquishIt pour MVC3 modifiait ces caractères.Lorsque j'exclus font-awesome.css du bundle, tout fonctionne bien.

Était-ce utile?

La solution 4

L'outil de regroupement SquishIt pour MVC3 codait en URL les chemins de police, donc ../fonts/fontawesome-webfont.eot? dans le fichier CSS a été modifié en ../fonts/fontawesome-webfont.eot%3F.Cela renvoie normalement 400, car %3F est considéré comme dangereux.Si vous définissez requestPathInvalidCharacters="" alors %3F est considéré comme sûr, mais il n'y a évidemment pas de fichier ``../fonts/fontawesome-webfont.eot%3F`, donc 404.

J'ai supprimé fontawesome.css du bundle et tout fonctionne bien.

Autres conseils

Pourquoi @font-face génère-t-il une erreur 404 sur les fichiers woff ?

Ajoutez les types MIME dans le configuration Web:

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    </staticContent>    
  </system.webServer>

Vous pouvez ouvrir IIS, pointer vers votre site Web, dans Séance IIS, sélectionner Types MIME.Après l'affichage de la vue Types MIME, cliquez sur Ajouter -> dans la boîte de dialogue:

  • Extension du nom de fichier : .woff
  • Types MiME : application/x-font-woff

cliquez sur OK.

Fait.

Cette réponse ne concerne pas le problème ci-dessus Mais pour ceux qui sont confrontés à une erreur similaire mais pour des raisons différentes et qui atterrissent dans ce fil.

J'ai rencontré un problème similaire, mais j'ai découvert plus tard qu'IIS essayait de rechercher des fichiers woff, eot de police géniale dans le dossier. MyIpAddress/fonts/fontawesome-webfont.woof mais j'avais les fichiers dans un dossier différent.Déplacer le fontawesome-webfont.eot, fontawesome-webfont.svg,fontawesome-webfont.ttf, fontawesome-webfont.woff dans mon dossier de polices, j'ai résolu mon problème

pour moi, seul l'ajout du lien bootstrap CDN a résolu le problème

pour ta page :

<head>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
...
</head>

Jouer avec le serveur IIS est risqué, au lieu de cela, j'ai essayé une autre astuce qui a réussi à 100%.

Étape 1

Renommez les noms des fichiers de polices en ajoutant .jpg à la fin des fichiers.

fontawesome-webfont.eot.jpg (de même)

Modifiez ensuite les types de fichiers dans les lignes de rendu de police fontawesome.css

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

Si vous utilisez CodeIgniter sous IIS7 :

Dans votre fichier web.config, ajoutez wow au modèle

<rule name="Rewrite CI Index"> <match url=".*" /> <conditions> <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" /> </conditions> <action type="Rewrite" url="index.php/{R:0}" /> </rule>

J'espère que cela aide !

Je suis passé de woff2 à woff et tout s'est bien passé.

Si vous ajoutez FontAwesome via le regroupement, cela peut supprimer l'URL woff2.Voir la solution suivante sur un fil de discussion similaire où CssRewriteUrlTransform sert à retravailler l'url :https://stackoverflow.com/a/22700610/746984

Utilisez ce cdn dans votre page index.html...

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top