webentwicklung-frage-antwort-db.com.de

Twitter-Bootstrap-Glyphicons werden im Freigabemodus 404 nicht angezeigt

Ich arbeite an einem Projekt in ASP.NET MVC 4 und habe folgende Schritte ausgeführt: 

  1. Heruntergeladene Twitter-Bootstrap von http://blog.getbootstrap.com/2013/12/05/bootstrap-3-0-3-released/

  2. Setze Aktion für Schriftdateien auf Inhalt (die Dateien befinden sich im Ordner ~/Content/font)

    glyphicons-halflings-regular.eot
    glyphicons-halflings-regular.svg
    glyphicons-halflings-regular.ttf
    glyphicons-halflings-regular.woff
    
  3. Wurde zu RouteConfig.cs hinzugefügt

    routes.IgnoreRoute ("{Ordner}/{* PfadInfo}", neuer {Ordner = "Inhalt"});

  4. Folgende Elemente wurden zu Web.config hinzugefügt

    <?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. Folgender Code in BundleConfig.cs enthalten

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

    Auch mit folgendem Code versucht 

    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. Wird in main Layout.cshtml aufgerufen

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

Normalerweise werden in localhost noch Symbole angezeigt, aber wenn ich den Code zum Freigeben des Servers drücke, kann ich nur das Quadrat anstelle des Symbols sehen und in Chrome die Registerkarte "Konsole" erhalten 

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.woff 404-Test (nicht gefunden): 1

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.ttf 404-Test (nicht gefunden): 1

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.svg 404-Test (nicht gefunden): 1

Vielen Dank.

34
22db05

Ich hatte dieses Problem und stellte fest, dass dies auf die Minifizierung zurückzuführen war, wenn im Freigabemodus erstellt wurde.

Anstatt die Dateien manuell von der Bootstrap-Site herunterzuladen und das Bündeln zu konfigurieren, verwende ich das Paket nuget, das dies für mich tut.

Wenn Sie dies tun möchten, führen Sie die folgenden Schritte aus.

Führen Sie den folgenden Befehl aus, um Bootstrap zu installieren:

Install-Package Twitter.Bootstrap.MVC

Daraufhin werden alle Bootrap-Dateien heruntergeladen und die folgende vordefinierte Bootstrap-Paket-Konfiguration enthält:

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

Das Obige enthält auch Kommentare, die beschreiben, wie die Bundles dargestellt werden.

Ich denke, der Fehler der ursprünglichen 404-Schrift war darauf zurückzuführen, dass sich der Schriftartenordner auf einer anderen Ebene befand, als in der minimierten CSS angegeben ist.

Wenn Sie es vorziehen, Ihre aktuelle Lösung beizubehalten, konnte 404 nur repariert werden, indem Sie den Zeichensatzordner in das Stammverzeichnis der Webanwendung kopieren.

Um es lokal zu testen, entfernen Sie einfach debug="true" aus Ihrer Web-Konfiguration, um die Bereitstellung in AppHarbor zu speichern. 

7
hutchonoid

So habe ich es gelöst - ich verwende MVC5 und Bootstrap 3.1.1.

Ich habe meine Dateien im Projekt so organisiert:

/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

Dann fügte ich meinem virtuellen Pfad in der bundle config eine weitere Ebene hinzu.

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

Zuvor hatte ich ~/Content/css verwendet.

Und in der Ansicht ...

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

Dies funktionierte, aber ich bekam immer noch eine 404 für eine der Schriftarten ... also habe ich die Lösung von Giles hinzugefügt.

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

Kopieren des Zeichensatzordners in das Stammverzeichnis der Web-App und Ändern der MIME-Typen in web.config in 

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

behebte das Problem für mich. Bitte beachten Sie, dass sich der .woff-MimeType von dem in der Frage angegebenen unterscheidet.

23
Giles Roberts

Ich hatte das gleiche Problem mit dem IIS 7.5-Webserver. 

Die Lösung bestand darin, .woff zur Liste der Dateinamenerweiterungen mit dem MIME-Typ application/octet-stream auf dem Webserver hinzuzufügen.

Das könnte man auch in der web.config erreichen:

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

Ich hatte das gleiche Problem. Ich weiß nicht genau warum, aber wenn ich die Datei bootstrap.min.css entferne und CssRewriteUrlTransform auf das Bundle stelle, funktioniert alles. Ich verwende bootstrap v3.1.1 

BEARBEITEN: Nach einiger Untersuchung ist die Lösung hier definiert: CssRewriteUrlTransform heißt nicht Das Entfernen von bootstrap.min.css oder das Verweisen auf bootstrap.min.css anstelle von bootstrap.css erzwingt das Bündeln/minification in Ihrer Datei und so wird die CssRewriteUrlTransform aufgerufen.

4
asidis

Ich hatte das gleiche Problem. Ich bin mit Bootstraps CDN umgegangen.

1
Gary Brunton

In der Variablen IgnoreRoute haben Sie den Ordner "Content" angegeben. Versuchen Sie auch, eine für Schriftarten hinzuzufügen ", da dies von Ihnen verlangt wird.

routes.IgnoreRoute("{folder}/{*pathInfo}", new { folder = "fonts" });
0