web-dev-qa-db-fra.com

"NetworkError: 404 Introuvable fontawesome-webfont.woff? V = 4.0.3

Je reçois ce message d'erreur chaque fois que je charge ma page d'application . J'utilise Apache. Voici mon code CSS.

format de l'url ('../ fonts/fontawesome-webfont.woff? v = 4.0.3')

Firefox jette 

"NetworkError: URL 404 non trouvée .../fonts/fontawesome-webfont.woff? V = 4.0.3

Alors que le chrome dit

GET url .../fonts/fontawesome-webfont.woff? V = 4.0.3 404 (Introuvable)

Quelqu'un peut-il me dire comment résoudre ce problème? Merci d'avance.

font-facefont-awesome
27
Zeshan Khattak

Cela a fonctionné pour moi: Ajoutez les lignes suivantes à votre web.config

<system.webServer>
 <staticContent>
   <remove fileExtension=".woff"/>
   <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
 </staticContent>
</system.webServer>

Vous devez ajouter ces lignes car, par défaut, Apache n'est pas configuré avec .woff en tant que type MIME par défaut. Type MIME par défaut d'Apache Ceci est également valable pour IIS. Comme Seb Duggan explique ici: IIS par défaut MIME , par défaut, les fichiers .woff ne seront pas servis par le serveur.

74
HowieH

J'ai mis à jour les types mime sur mon serveur Web IIS et cela résout mon problème.

Extention > .ttf    MimeType > application/x-font-ttf
Extention > .woff   MimeType > application/x-font-woff
Extention > .woff2  MimeType > application/x-font-woff2

Je n'ai pas besoin de changer quoi que ce soit dans web.config.

12
Mahib

Je le résous également en ajoutant le type de fichier sous les gestionnaires de votre web.config pour toute application .net, angulaire, etc.

     <handlers>
     <add name="fonts" path="*.woff" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
     <add name="fonts2" path="*.woff2" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
     </handlers>
5
Xvegas

Ajoutez "src:" avant url, exemple: -

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

Si vous n'avez pas accès à la configuration de votre serveur Web, vous pouvez également simplement RENOMMER le fichier afin qu'il se termine par svg (tout en conservant le format). Fonctionne bien pour moi dans Chrome et Firefox.

1
Phil McCarty

Je ne sais pas pourquoi la réponse acceptée ne fonctionnait pas pour moi, mais j'ai copié la configuration suivante pour que cela fonctionne:

<system.webServer>
<staticContent>
  <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
  <remove fileExtension=".woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
</system.webServer>
1
Usman Khalid

Si vous utilisez IIS 6, vous pouvez résoudre votre problème en ajoutant Mime à IIS:

 enter image description here

0
mjhdesigner

Si aucune des solutions ci-dessus ne fonctionne, essayez l'une des pages de stackoverflow pour lesquelles la valeur false doit être définie sur BundleTable.EnableOptimizations dans le fichier BundleConfig.cs du dossier App_Start. 

BundleTable.EnableOptimizations = false;

Cependant, vous perdrez les avantages du groupement, ce qui réduit le nombre de demandes http de votre navigateur. 

0
Kagan Agun