Comment supprimer l'erreur concernant glyphicons-halflings-regular.woff2 introuvable


95

L'application ASP.NET MVC4 Bootstrap 3 s'exécute à partir de Microsoft Visual Studio Express 2013 pour Web IDE.

La console Chrome affiche toujours une erreur

http://localhost:52216/admin/fonts/glyphicons-halflings-regular.woff2
Failed to load resource: the server responded with a status of 404 (Not Found)

Ce fichier existe dans le répertoire des polices de l'Explorateur de solutions. L'action de construction est définie sur "Contenu" et Copier dans le répertoire de sortie est "Ne pas copier comme dans d'autres fichiers de polices". Bootstrap 3 est ajouté à la solution à l'aide de NuGet. Comment résoudre ce problème afin que cette erreur ne se produise pas? L'application affiche correctement les icônes Glyphicon et FontAwesome. Cette erreur se produit toujours au démarrage de l'application.

Réponses:


238

Ce problème se produit car IIS ne connaît pas les types MIME de fichiers woffet woff2.

Solution 1:

Ajoutez ces lignes dans votre projet web.config:

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

Solution 2:

Sur la page du projet IIS:

Étape 1: Accédez à la page d'accueil de votre projet IIS et double-cliquez sur le MIME Typesbouton:

Étape 1

Étape 2: Cliquez sur le Addbouton du Actionsmenu: Étape 2

Étape 3: Au milieu de l'écran apparaît une fenêtre et dans cette fenêtre, vous devez ajouter les deux lignes de la solution 1: Étape 3


Cela a résolu le problème pour moi, mais pourquoi? J'apprécierais une explication sur les raisons pour lesquelles la solution fonctionne plus qu'un simple copier / coller stupide du code fourni.
Bpainter

3
@Bpainter La première ligne de cette réponse vous explique pourquoi. Les types mime ne sont pas associés à un type et ne peuvent donc pas être chargés par le navigateur. Pourquoi un navigateur ne charge-t-il pas un fichier de type mime non associé? Je pense que c'est une question distincte dont je ne connais pas la réponse.
Camille Sévigny

4
@ CamilleSévigny Je crois que la réponse à votre question est que IIS ne met à disposition que des types de fichiers valides, donc comme il ne reconnaît pas les extensions .woff et .woff2, il répond aux demandes de ces fichiers avec 404 - introuvable.
Grungondola

@ CamilleSévigny Merci, quand j'ai fait ce commentaire, la première ligne n'était pas là. Il a été édité après coup. Sans votre commentaire, je ne l'aurais jamais vu.
Bpainter

Dans mon cas, le problème était le CssRewriteUrlTransform que j'ai utilisé dans le bundle de bootstrap et Font-Awesome. Si vous conservez leur structure de dossiers normale, il n'est pas nécessaire d'utiliser cette option.
g_brahimaj

47

Dans mon cas, je viens de télécharger le fichier manquant directement à partir d'ici: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2


7
résolu pour moi. Merci. J'ai téléchargé les fichiers et enregistré le dossier des polices dans le répertoire de mon projet. Fichiers CSS dans le dossier "css", polices dans le dossier "fonts"
CyprUS

1
Parfois, les solutions sont assez simples, et nous ne sommes pas au courant:) Thnx pour la solution, j'ai manqué cela dans mon fontsdossier dans mon application MVC5
Irf

6

Ajoutez celui-ci à votre html si vous n'avez accès qu'au html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Merci, cette solution a fonctionné pour moi. Mais, l'ajout de la balise <staticContent> dans le web.config selon ce - stackoverflow.com/questions/46508793/... - n'a pas fonctionné pour moi.
BUDDHIKA

5

Pour moi, le problème était double: Premièrement, la version d'IIS avec laquelle je travaillais ne connaissait pas le .woff2type MIME, mais seulement .woff. J'ai corrigé cela en utilisant IIS Manager au niveau du serveur, et non au niveau de l'application Web, afin que le paramètre ne soit pas remplacé avec chaque nouveau déploiement d'application. (Sous IIS Manager, je suis allé aux types MIME et j'ai ajouté les éléments manquants .woff2, puis mis à jour .woff.)

Deuxièmement, et plus important encore, je regroupais bootstrap.cssavec d'autres fichiers sous forme de fichiers "~/bundles/css/site". Pendant ce temps, mes fichiers de polices étaient au format "~/fonts". bootstrap.cssrecherche les polices glyphicon dans "../fonts", qui se sont traduites par un "~/bundles/fonts"chemin incorrect.

En d'autres termes, mon chemin de bundle était un répertoire trop profond. Je l'ai renommé "~/bundles/siteCss"et mis à jour toutes les références que j'ai trouvées dans mon projet. Maintenant, bootstrap a cherché "~/fonts"les fichiers glyphicon, ce qui a fonctionné. Problème résolu.

Avant de résoudre le deuxième problème ci-dessus, aucun des glyphiconfichiers de polices ne se chargeait. Le symptôme était que toutes les instances de glyphiconglyphes dans le projet montraient juste une boîte vide. Cependant, ce symptôme ne s'est produit que dans les versions déployées de l'application Web, pas sur ma machine de développement. Je ne sais toujours pas pourquoi c'était le cas.


3

J'ai essayé toutes les suggestions ci-dessus, mais mon problème réel était que mon application recherchait le dossier / font et son contenu (.woff, etc.) dans app / fonts, mais mon dossier / fonts était au même niveau que / app. J'ai déplacé / fonts sous / app, et cela fonctionne bien maintenant. J'espère que cela aidera quelqu'un d'autre à parcourir le Web pour obtenir une réponse.


1

Ce problème se produit car IIS ne trouve pas l' emplacement réel des types mime de fichier woff2. Définissez correctement l'URL de font-face, gardez également font-family comme glyphicons-halfflings-regular dans votre fichier CSS comme indiqué ci-dessous.

@font-face {
font-family: 'glyphicons-halflings-regular'; 
src: url('../../../fonts/glyphicons-halflings-regular.woff2') format('woff2');}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.