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

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.

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 2: Cliquez sur le Addbouton du Actionsmenu:

É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:

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

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

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.

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.

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');}