CSS 字体真棒在 MVC5 中不起作用 bundleconfig
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22700385/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
font-awesome not working bundleconfig in MVC5
提问by James123
If I direct refer to font-awesome.cssin _layouts page. it will work
如果我直接参考font-awesome.css_layouts 页面。它会工作
<link href="~/Content/font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" />
But I used in BundleConfig.cs. Icon is not showing.
但是我在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"
));
and also I observed browser console have error to font directory.
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
我还观察到浏览器控制台对字体目录有错误。
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
what could be the problem?
可能是什么问题呢？
回答by Simon C
Try using CssRewriteUrlTransformwhen bundling:
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());
This changes any urls for assets from within the css file to absolute urls so the bundling doesn't mess up the relative path.
这会将 css 文件中的任何资产 url 更改为绝对 url，因此捆绑不会弄乱相对路径。
Docs for CssRewriteUrlTransform
回答by harveyt
My solution was simple: run PM> Install-Package FontAwesome, and reference the correct path:
我的解决方案很简单：运行 PM> Install-Package FontAwesome，并引用正确的路径：
.Include("~/Content/font-awesome.min.css")
回答by MarwaAhmad
I had the same error message and fixed after setting mime types for web fonts in IIS.
在 IIS 中为 web 字体设置 mime 类型后，我有相同的错误消息并修复。
回答by ZerosAndOnes
With version 5.1.0 I had to reference all.cssinstead of fontawesome.cssi.e.,
对于 5.1.0 版，我不得不参考all.css而不是fontawesome.cssie，
bundles.Add(new StyleBundle("~/bundles/fontawesome").Include(
"~/Content/all.css",
new CssRewriteUrlTransform()
));
回答by big_water
I also had this same error message. I had to do a combination of the answers listed in this thread:
我也有同样的错误信息。我必须结合此线程中列出的答案：
Add this line of code as suggested by @Simon C:
.Include("~/Content/font-awesome-4.0.3/css/font-awesome.css", new CssRewriteUrlTransform());
按照@Simon C 的建议添加这行代码：
.Include("~/Content/font-awesome-4.0.3/css/font-awesome.css", new CssRewriteUrlTransform());
This worked to fix the relative urls, however, I had to delete the font-awesome.min.css file from my bower directory every time I published otherwise the bundler would get confused and not include and minify the font-awesome.css file. So...
这有助于修复相对 url，但是，每次我发布时，我都必须从我的 bower 目录中删除 font-awesome.min.css 文件，否则打包器会感到困惑，并且不会包含和缩小 font-awesome.css 文件。所以...
I had to do what @miha suggested in a comment and fix the relative urls in the font-awesome.min.css file with CssRewriteUrlTransform(). So I decided to rewrite the urls in the .min file and just include that instead of the unminified version and it worked:
.Include("~/Content/font-awesome-4.0.3/css/font-awesome.min.css", new CssRewriteUrlTransform());
我必须按照@miha 在评论中的建议进行操作，并使用 CssRewriteUrlTransform() 修复 font-awesome.min.css 文件中的相关 url。所以我决定重写 .min 文件中的 urls 并只包含它而不是未缩小的版本，它起作用了：
.Include("~/Content/font-awesome-4.0.3/css/font-awesome.min.css", new CssRewriteUrlTransform());
If I understand correctly, the bundler won't try to minify the .min file again because it's already minified. The only "drawback" is it does not concatenate the font-awesome.min.css content into the single css file that the bundler creates. It will be included separately.
如果我理解正确，打包器不会再次尝试缩小 .min 文件，因为它已经缩小了。唯一的“缺点”是它不会将 font-awesome.min.css 内容连接到捆绑器创建的单个 css 文件中。它将单独包含在内。
回答by Gianpiero
I add another answer to this question has I found the solution by mixing some of them.
我为这个问题添加了另一个答案，我通过混合其中的一些找到了解决方案。
- Most voted answeris the main solution, but it is also important to
- Add the entry suggested by this answer. Finally
- Follow the comment from @feradz in most voted answer: "delete the .min.css version -- it was causing the optimizer to not generate a minified version with the correct path"
Last point is the key of all: distributed "min" versions of the js files, does not follow the "CssRewriteUrlTransform" rules. So, manually deleting bootstrap.min.css, font-awesone.min.css definitively solved the issue.
最后一点是关键：分布式“min”版本的js文件，不遵循“CssRewriteUrlTransform”规则。所以，手动删除 bootstrap.min.css，font-awesone.min.css 最终解决了这个问题。
