web-dev-qa-db-fra.com

Les glyphiques de démarrage n'apparaissent pas en mode publication 404

Je travaille sur un projet dans ASP.NET MVC 4 et j’ai suivi les étapes suivantes: 

  1. Bootstrap Twitter téléchargé depuis http://blog.getbootstrap.com/2013/12/05/bootstrap-3-0-3-released/

  2. Définissez l'action Construire sur les fichiers de police en contenu (les fichiers se trouvent dans le dossier ~/Content/font)

    glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

  3. Ajouté à RouteConfig.cs

    routes.IgnoreRoute ("{dossier}/{* cheminInfo}", nouveau {dossier = "Contenu"});

  4. Ajout des éléments suivants à Web.config

    <?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
   <staticContent>
       <remove fileExtension=".eot" />
       <remove fileExtension=".ttf" />
       <remove fileExtension=".otf"/>
       <remove fileExtension=".woff"/>
       <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
       <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
       <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
   </staticContent>
</system.webServer>

  5. Code suivant inclus dans BundleConfig.cs

    bundles.Add(new StyleBundle("~/bundles/maincss")
                    .Include("~/Content/bootstrap/bootstrap.css")
                    .Include("~/Content/bootstrap/bootstrap-theme.css")
                    .Include("~/Content/hbl-full.css"));

    Aussi essayé avec le code suivant 

    IItemTransform cssFixer = new CssRewriteUrlTransform();

bundles.Add(new StyleBundle("~/bundles/maincss")
                    .Include("~/Content/bootstrap/bootstrap.css", cssFixer)
                    .Include("~/Content/bootstrap/bootstrap-theme.css", cssFixer)
                    .Include("~/Content/hbl-full.css", cssFixer));

  6. Appelé dans Layout.cshtml principal

    @ Styles.Render ("~/bundles/maincss")

Toujours dans les icônes localhost sont affichés normalement, mais lorsque je Push code pour libérer le serveur, je ne peux voir que carré au lieu de l'icône et dans l'onglet Console de Chrome, je reçois 

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.woff 404 (introuvable) test: 1

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.ttf 404 (introuvable) test: 1

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.svg 404 (introuvable) test: 1

Je vous remercie.

c#asp.netasp.net-mvctwitter-bootstrapglyphicons
34
22db05

J'ai eu ce problème et j'ai constaté que cela se produisait à cause de la minification lors de la construction en mode de libération.

Plutôt que de télécharger les fichiers manuellement à partir du site d'amorçage et de configurer le regroupement, j'utilise le paquet nuget qui le fait pour moi.

Si vous souhaitez le faire, suivez les étapes suivantes.

Exécutez la commande suivante pour installer Bootstrap:

Install-Package Twitter.Bootstrap.MVC

Ceci télécharge tous les fichiers bootrap et inclut la configuration prédéfinie du bundle Bootstrap ci-dessous:

public class BootstrapBundleConfig
{
    public static void RegisterBundles()
    {
        // Add @Styles.Render("~/Content/bootstrap") in the <head/> of your _Layout.cshtml view
        // For Bootstrap theme add @Styles.Render("~/Content/bootstrap-theme") in the <head/> of your _Layout.cshtml view
        // Add @Scripts.Render("~/bundles/bootstrap") after jQuery in your _Layout.cshtml view
        // When <compilation debug="true" />, MVC4 will render the full readable version. When set to <compilation debug="false" />, the minified version will be rendered automatically
        BundleTable.Bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
        BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap").Include("~/Content/bootstrap.css"));
        BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap-theme").Include("~/Content/bootstrap-theme.css"));
    }
}

Ce qui précède inclut également des commentaires décrivant comment rendre les ensembles.

Je pense que l’erreur de police 404 originale était due au fait que le dossier des polices se trouvait à un niveau différent de celui spécifié dans le fichier css minifié.

Si vous préférez conserver votre solution actuelle, le seul moyen de réparer le 404 était de copier le dossier de polices à la racine de l'application Web.

Pour le tester localement, supprimez simplement debug="true" de votre configuration Web pour enregistrer le déploiement sur AppHarbor. 

7
hutchonoid

Voici comment j'ai résolu le problème - J'utilise MVC5 et Bootstrap 3.1.1.

J'ai mes fichiers organisés dans le projet comme ceci:

/Content/Bootstrap/bootstrap.css
                   bootstrap.min.css
/Content/fonts/glyphicons-halflings-regular.eot
               glyphicons-halflings-regular.svg
               glyphicons-halflings-regular.ttf
               glyphicons-halflings-regular.woff

Ensuite, j'ai ajouté un autre niveau à mon chemin virtuel dans bundle config 

bundles.Add(new StyleBundle("~/Content/site/css").Include(
    "~/Content/bootstrap/bootstrap.css",
    "~/Content/styles/site.css"
));

Auparavant j'avais utilisé ~/Content/css

Et dans la vue ...

@Styles.Render("~/Content/site/css")

Cela a fonctionné mais j'ai quand même eu un 404 sur l'une des polices ... alors j'ai ajouté la solution de Giles.

<?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
    <staticContent>
        <remove fileExtension=".eot" />
        <remove fileExtension=".ttf" />
        <remove fileExtension=".otf"/>
        <remove fileExtension=".woff"/>
        <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
        <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
        <mimeMap fileExtension=".otf" mimeType="font/otf" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
</system.webServer>
24
Jasen

Copier le dossier de polices à la racine de l’application Web et modifier les types MIME dans web.config en 

<?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
  <staticContent>
    <remove fileExtension=".eot" />
    <remove fileExtension=".ttf" />
    <remove fileExtension=".otf"/>
    <remove fileExtension=".woff"/>
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
    <mimeMap fileExtension=".otf" mimeType="font/otf" />
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  </staticContent>
</system.webServer>

résolu le problème pour moi. Veuillez noter que le mimeType .woff est différent de celui de la question.

23
Giles Roberts

J'ai eu le même problème en utilisant IIS 7.5 Webserver. 

La solution consistait à ajouter .woff à la liste des extensions de nom de fichier du type MIME application/octet-stream sur le serveur Web.

Vous pouvez également obtenir la même chose dans web.config:

<staticContent>
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
</staticContent>
9
Heimdalingen

J'ai eu le même problème. Je ne sais pas vraiment pourquoi, mais si je supprime le fichier bootstrap.min.css et que je définis CssRewriteUrlTransform sur le bundle, tout fonctionne. J'utilise bootstrap v3.1.1 

EDIT: Après quelques recherches, la solution est définie ici: CssRewriteUrlTransform n’est pas appelé Donc, supprimer Bootstrap.min.css ou faire référence à bootstrap.min.css au lieu de bootstrap.css forcera/minification sur votre fichier et il appellera donc CssRewriteUrlTransform.

4
asidis

J'ai eu le même problème. Je l'ai contourné en utilisant bootstrap CDN.

1
Gary Brunton

Dans la IgnoreRoute, vous avez spécifié le dossier "Contenu". Essayez également d’en ajouter un pour les polices ", car c’est ce que vous demandez.

routes.IgnoreRoute("{folder}/{*pathInfo}", new { folder = "fonts" });
0
Andrés Nava - .NET