Twitter Bootstrap glyphicons n'apparaissent pas en mode de publication 404

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

  1. Téléchargé twitter bootstrap à partir de http://blog.getbootstrap.com/2013/12/05/bootstrap-3-0-3-released/

  2. Définissez L'action de construction sur les fichiers de police sur le contenu (les fichiers sont situés 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} / {*pathInfo}", nouveau {dossier = " Contenu" });

  4. Ajout des éléments suivants au 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. Inclus le code suivant 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"));

    Également 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 la mise en page principale.cshtml

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

Toujours dans localhost les icônes sont affichées normalement, mais quand je pousse le code pour libérer le serveur, Je ne peux voir que square au lieu d'icon et dans L'onglet Console de Chrome, je reçois

Obtenir http://domain.apphb.com/fonts/glyphicons-halflings-regular.woff 404 (non trouvé) test: 1

Obtenir http://domain.apphb.com/fonts/glyphicons-halflings-regular.ttf 404 (non trouvé) test: 1

Obtenir http://domain.apphb.com/fonts/glyphicons-halflings-regular.svg 404 (non trouvé) test: 1

Je vous Remercie.

34
demandé sur 22db05 2014-01-22 01:55:34

7 réponses

J'ai eu ce problème et j'ai trouvé que cela se produisait en raison de la minification lors de la construction en mode release.

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

Si vous souhaitez le faire, procédez comme suit.

Exécutez la commande suivante pour installer Bootstrap:

Install-Package Twitter.Bootstrap.MVC

Ceci télécharge tous les fichiers boottrap et inclut le bundle Bootstrap prédéfini ci-dessous configuration: 

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 comprend également des commentaires décrivant comment rendre les paquets.

Je pense que l'erreur de police 404 d'origine était due au dossier fonts étant à un niveau différent de ce qui est spécifié dans le CSS minifié.

Si vous préférez garder votre solution actuelle, la seule façon de réparer le 404 était de copier le dossier de police à la racine de l'application web.

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

7
répondu hutchonoid 2014-01-22 09:11:10

Voici comment je l'ai résolu - 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 le 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 toujours un 404 sur l'une des polices... j'ai donc 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
répondu Jasen 2015-11-02 17:26:46

Copie du dossier de police à la racine de l'application web et modification des types mime dans le 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="application/font-woff" />
  </staticContent>
</system.webServer>

Correction du problème pour moi. Veuillez noter que l' .woff mimeType est différent de celui de la question.

23
répondu Giles Roberts 2014-03-28 11:33:41

J'ai eu le même problème, en utilisant le serveur web IIS 7.5.

, La solution était d'ajouter .woff à la liste des extensions de nom de fichier avec le type MIME application / octet-stream sur le serveur web.

Vous pouvez également réaliser la même chose dans le web.configuration: 

<staticContent>
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
</staticContent>
9
répondu Heimdalingen 2014-07-02 12:48:57

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

Modifier: Après quelques recherches, la solution est définie ici: CssRewriteUrlTransform n'est pas appelé Donc, en supprimant le bootstrap.min.CSS ou référencement bootstrap.min.css au lieu de bootstrap.css forcera le regroupement / minification sur votre fichier et donc il appellera le CssRewriteUrlTransform.

4
répondu asidis 2017-05-23 11:33:15

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

1
répondu Gary Brunton 2014-01-23 03:07:22

Dans le IgnoreRoute, vous avez spécifié le "Contenu" dossier. Essayez aussi d'en ajouter un pour les polices", puisque c'est ce que vous demandez.

routes.IgnoreRoute("{folder}/{*pathInfo}", new { folder = "fonts" });
0
répondu Andrés Nava - .NET 2014-01-21 22:26:32