it-swarm.com.de

font-awesome funktioniert nicht in MVC5

Wenn ich direkt auf font-awesome.css in der _layouts-Seite verweise. es wird klappen

<link href="~/Content/font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" />

Aber ich habe in BundleConfig.cs verwendet. Das Symbol wird nicht angezeigt. 

 bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/font-awesome-4.0.3/css/font-awesome.css",
                        "~/Content/bootstrap.css",                        
                         "~/Content/body.css",
                        "~/Content/site.css",
                        "~/Content/form.css"
                     ));

und ich habe auch beobachtet, dass die Browserkonsole einen Fehler im Font-Verzeichnis hat .Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:51130/fonts/fontawesome-webfont.woff?v=4.0.3

was könnte das Problem sein?

46
James123

Wie in diesem Artikel beschrieben, versuchen Sie beim Bündeln CssRewriteUrlTransform zu verwenden:

bundles.Add(new StyleBundle("~/Content/css").Include(
        "~/Content/bootstrap.css",                        
        "~/Content/body.css",
        "~/Content/site.css",
        "~/Content/form.css"
    ).Include("~/Content/font-awesome-4.0.3/css/font-awesome.css", new CssRewriteUrlTransform());

Dadurch werden URLs für Assets aus der CSS-Datei in absolute URLs geändert, sodass der relative Pfad nicht durch die Bündelung beeinträchtigt wird. 

MSDN-Link: CssRewriteUrlTransform

93
Simon C

Meine Lösung war einfach: Führen Sie PM> Install-Package FontAwesome aus und verweisen Sie auf den korrekten Pfad:

.Include("~/Content/font-awesome.min.css")
9
harveyt

Ich hatte dieselbe Fehlermeldung und reparierte Mime-Typen nach für Web-Schriftarten in IIS .

3
MarwaAhmad

Ich hatte auch diese Fehlermeldung. Ich musste eine Kombination der in diesem Thread aufgeführten Antworten erstellen:

  1. Fügen Sie diese Codezeile wie von @Simon C vorgeschlagen hinzu:

    .Include ("~/Content/font-awesome-4.0.3/css/font-awesome.css"), neues CssRewriteUrlTransform ());

Dies funktionierte, um die relativen URLs zu korrigieren. Allerdings musste ich die Datei font-awesome.min.css bei jeder Veröffentlichung aus meinem Verzeichnis "Bower" löschen. So...

  1. Ich musste tun, was @miha in einem Kommentar vorschlug, und die relativen URLs in der Datei font-awesome.min.css mit CssRewriteUrlTransform () korrigieren. Also entschied ich mich, die URLs in die .min-Datei umzuschreiben und nur die unminifizierte Version einzufügen, und es funktionierte:

    .Include ("~/Content/font-awesome-4.0.3/css/font-awesome.min.css"), neues CssRewriteUrlTransform ());

Wenn ich es richtig verstanden habe, versucht der Bundler nicht erneut, die .min-Datei zu minimieren, da sie bereits minimiert ist. Der einzige "Nachteil" besteht darin, dass der Inhalt von font-awesome.min.css nicht in der einzigen vom Bundler erstellten CSS-Datei verkettet wird. Es wird separat beigefügt.

1
big_water

Mit Version 5.1.0 musste ich auf all.css anstelle von fontawesome.css verweisen, d. H.

bundles.Add(new StyleBundle("~/bundles/fontawesome").Include(
    "~/Content/all.css",
    new CssRewriteUrlTransform()
));
0
ZerosAndOnes

Ich füge eine weitere Antwort zu dieser Frage hinzu. Ich habe die Lösung gefunden, indem ich einige von ihnen gemischt habe.

  1. Meist gewählte Antwort ist die Hauptlösung, aber es ist auch wichtig für
  2. Fügen Sie den von diese Antwort vorgeschlagenen Eintrag hinzu. Endlich
  3. Folgen Sie dem Kommentar von @feradz in meistens gewählte Antwort : "Die .min.css-Version löschen. Dies hat dazu geführt, dass der Optimierer keine minimierte Version mit dem richtigen Pfad generiert.

Letzter Punkt ist der Schlüssel für alle: verteilte "min" -Versionen der js-Dateien, folgt nicht den "CssRewriteUrlTransform" -Regeln. Durch das manuelle Löschen von bootstrap.min.css konnte font-awesone.min.css das Problem endgültig lösen.

0