web-dev-qa-db-ja.com

MVC5でfont-awesomeが動作しないbundleconfig

_layoutsページの_font-awesome.css_を直接参照する場合。それが動作します

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

しかし、私は_BundleConfig.cs_で使用しました。アイコンが表示されていません。

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

また、ブラウザコンソールでフォントディレクトリにエラーがあることも確認しました。 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

何が問題なのでしょうか？

csstwitter-bootstrapfontsasp.net-mvc-5font-awesome
48
James123

バンドルするときにCssRewriteUrlTransformを使用してみてください：

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());

これにより、アセットのURLがcssファイル内から絶対URLに変更されるため、バンドリングによって相対パスが混乱することはありません。

CssRewriteUrlTransform のドキュメント

97
Simon C

私の解決策は簡単でした：PM> Install-Package FontAwesomeを実行し、正しいパスを参照します：

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

同じエラーメッセージが表示され、 IISのWebフォントのMIMEタイプの設定 の後に修正されました。

3
MarwaAhmad

バージョン5.1.0では、all.cssの代わりにfontawesome.cssを参照する必要がありました。つまり、

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

これと同じエラーメッセージも表示されました。このスレッドにリストされている回答を組み合わせて実行する必要がありました。

  1. @Simon Cが示唆する次のコード行を追加します。

    .Include（ "〜/ Content/font-awesome-4.0.3/css/font-awesome.css"、new CssRewriteUrlTransform（））;

これは相対URLを修正するために機能しましたが、公開するたびにbowerディレクトリからfont-awesome.min.cssファイルを削除する必要がありました。そう...

  1. コメントで@mihaが提案したことを行い、CssRewriteUrlTransform（）でfont-awesome.min.cssファイルの相対URLを修正する必要がありました。そこで、.minファイルのURLを書き換えて、縮小されていないバージョンの代わりにそれを含めることを決定しました。

    .Include（ "〜/ Content/font-awesome-4.0.3/css/font-awesome.min.css"、new CssRewriteUrlTransform（））;

私が正しく理解していれば、バンドラーは.minファイルが既に縮小されているので、それを再度縮小しようとしません。唯一の「欠点」は、font-awesome.min.cssコンテンツを、バンドラーが作成する単一のcssファイルに連結しないことです。別途含まれます。

1
big_water

この質問に別の答えを追加します。それらのいくつかを混ぜて解決策を見つけました。

  1. 最も投票された答え が主な解決策ですが、それも重要です
  2. this answer で提案されたエントリを追加します。最後に
  3. most voted answer ： "delete.min.css version-オプティマイザが正しいパスで縮小バージョンを生成しなかった原因となっている@feradzのコメントに従ってください」

最後のポイントはすべての鍵です：jsファイルの分散「最小」バージョンであり、「CssRewriteUrlTransform」ルールに従いません。そのため、bootstrap.min.css、font-awesone.min.cssを手動で削除することで、問題を確実に解決しました。

0
Gianpiero Caretti