Question

如果我直接在_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

可能是什么问题？

Answer 1

如this article所述，请在捆绑时尝试使用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());

这会将css文件中任何资产的URL更改为绝对URL，因此捆绑不会弄乱相对路径。

MSDN链接：CssRewriteUrlTransform

Answer 2

我的解决方案很简单：运行PM＆gt; Install-Package FontAwesome，和参考正确的路径：

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

Answer 3

我有同样的错误消息并在setting mime types for web fonts in IIS之后修复。

Answer 4

我也有同样的错误信息。我必须结合这个帖子中列出的答案：

按@Simon C：
的建议添加此行代码
.Include（“〜/ Content / font-awesome-4.0.3 / css / font-awesome.css”，new CssRewriteUrlTransform（））;

这有助于修复相对网址，但是，每次我发布时，我都必须从我的bower目录中删除font-awesome.min.css文件，否则捆绑包会混淆并且不包括并缩小字体 - 真棒。 css文件。所以......

我必须做@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文件中。它将单独包含在内。

Answer 5

在版本5.1.0中，我不得不引用all.css而不是fontawesome.css，即

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

Answer 6

如果我通过混合一些解决方案找到了解决方案，那么我对该问题添加了另一个答案。

Most voted answer是主要的解决方案，但
添加this answer建议的条目。最后
按照most voted answer中@feradz的评论进行操作：“ 删除.min.css版本-这导致优化器未生成具有正确路径的缩小版本” < / li>

最后一点是关键：分布式js文件的“最小”版本，不遵循“ CssRewriteUrlTransform”规则。因此，手动删除bootstrap.min.css和font-awesone.min.css可以彻底解决此问题。

font-awesome在MVC5中没有使用bundleconfig

6 个答案: