web-dev-qa-db-fra.com

Comment faire pour supprimer l'erreur à propos de glyphicons-halflings-regular.woff2 introuvable

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

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 génération est définie sur "Contenu" et le répertoire Copier vers sortie est "Ne pas copier comme dans les autres fichiers de polices" . Bootstrap 3 est ajouté à la solution à l'aide de NuGet . ne se produit pas? L'application affiche correctement les icônes Glyphicon et FontAwesome. Cette erreur se produit toujours au démarrage de l'application.

asp.net-mvctwitter-bootstrapvisual-studioasp.net-mvc-4glyphicons
87
Andrus

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

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 de projet IIS:

Étape 1: Allez à la page d'accueil de votre projet IIS et double-cliquez sur le bouton MIME Types:

 Step 1

Étape 2: Cliquez sur le bouton Add du menu Actions:  Step 2

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

221
TotPeRo

Dans mon cas, je viens de télécharger le fichier manquant directement d’ici: https://github.com/twbs/bootstrap/blob/master/dist/fonts/glyphicons-halflings-regular.woff2

41
Reza Mamun

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 à naviguer sur le Web à la recherche d'une réponse.

3
cirl

Ajoutez celui-ci à votre code HTML si vous avez uniquement accès au code HTML:

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

Ce problème se produit car IIS ne trouve pas l'emplacement réel des types MIME du fichier woff2. Définissez correctement l'URL de font-face, conservez également font-family, comme indiqué ci-dessous.

@font-face {
font-family: 'glyphicons-halflings-regular'; 
src: url('../../../fonts/glyphicons-halflings-regular.woff2') format('woff2');}
0
Diwas Poudel

Pour moi, le problème était double: premièrement, la version de IIS avec laquelle je travaillais ne connaissait pas le type MIME .woff2, mais uniquement le .woff. J'ai résolu le problème en utilisant IIS Manager au niveau du serveur, pas au niveau de l'application Web, afin que le paramètre ne soit pas remplacé à chaque nouveau déploiement d'application. (Sous IIS Manager, je suis passé aux types MIME et j'ai ajouté le .woff2 manquant puis le .woff mis à jour.)

Deuxièmement, et plus important encore, je regroupais bootstrap.css avec d’autres fichiers en tant que "~/bundles/css/site". Pendant ce temps, mes fichiers de polices étaient en "~/fonts". bootstrap.css recherche les polices glyphicon dans "../fonts", qui se traduit par "~/bundles/fonts" - chemin incorrect.

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

Avant, je réglais le deuxième problème ci-dessus, none des fichiers de polices glyphicon se chargeaient. Le symptôme était que toutes les occurrences de glyphes glyphicon dans le projet montraient simplement 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.

0
Stephen G Tuggy