Bootstrap图标未显示在已发布的ASP.NET MVC应用程序中

Question

---注意：转到EDITED 2部分获取摘要----

我有一个ASP.NT MVC（4）应用程序。我集成了（twitter）Bootstrap。 Bootstrap运行正常，但是当我发布应用程序时，图标无法正确显示。

我试图重新发布应用程序但没有成功。

为了澄清我在下面放了一些图片。

当我从VS2013运行我的应用程序时，结果就是这样（可以）：

在展台，IE和Chrome。

但是当我运行已发布的应用程序时，结果就是这个（这不行）：

• 铬

• IE（10）

这个问题在某种程度上与评估的CSS有关，但我不知道这可能发生在哪一点。

本地应用程序中评估的css是这样的（可以）：

• 铬

• IE

但是在已发布的应用程序中，我有这个（不行）：

• 铬：

• IE：

有些人经历过这种行为吗？

我能做些什么来解决这个奇怪的问题？

--------------------------- EDITED ------------------- -----------

我在发布应用程序时会收到要包含的字体文件（.eot，.svg，.ttf和.woff）。 当我访问默认页面（应用程序根目录http://localhost/）时，显示图标的页面显示Chrome浏览器的“开发人员工具网络”选项卡中显示的文件：

在包含文件之前，我收到文件的404错误，所以我猜他们会继续被请求，即使它们没有显示在网络选项卡中。

但是，图标显示不正确。

------------------------ EDITED 2 --------------------- ------

好吧，我在IIS 7中重启了我的网站。请求开始被触发。这些是Chrome开发者工具网络标签中显示的文件请求：

然后，resquest正在寻找以下文件： /Content/themes/fonts/ ，但它们位于： /Content/themes/base/fonts/

base文件夹包含bootstrap文件夹，其中包含bootstrap.css文件。在CSS文件中有这个类引用字体文件：

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

似乎对字体文件的引用很好，因为文件树是这样的：

我可以将课程改为：

@font-face {
      font-family: 'Glyphicons Halflings';
      src: url('../base/fonts/glyphicons-halflings-regular.eot');
      src: url('../base/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../base/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../base/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../base/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
    }

但是，我真的知道这是怎么回事以及如何解决它！ 此外，图标将显示在已发布的站点中，但不会显示在本地站点中（从带有iisexpress的VS2013运行）。 提前感谢您的帮助！

Answer 1

如果捆绑脚本和CSS，则可能找不到像图像这样的资源。

在BundleConfig.cs文件中，使用CssRewriteUrlTransform创建包：

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

包含在_Layout.cshtml中：

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

一切都应该是好的。是的，查看通过网络发生的事情以查看生成404的URL将会有所帮助。

编辑： 确保您使用的是Microsoft.AspNet.Web.Optimization v1.1.0。确认版本1.1.3也会导致此错误。

Answer 2

IIS不知道如何处理（提供）这些文件（MIME）。

将此添加到web.config文件中的system.webServer节点，您将成为黄金：

<staticContent>    
      <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
      <!-- add more MIMEs if needed... -->
</staticContent>

- 已编辑，请参阅下面的Ryans和我的评论： 更好的是，为了安全起见，删除并添加mime类型maping：

<staticContent>    
    <remove fileExtension=".otf" />
    <mimeMap fileExtension=".otf" mimeType="font/otf" />
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
    <!-- add more MIMEs if needed... -->
</staticContent>

Answer 3

尝试禁用捆绑优化，会发生捆绑的css样式表的路径与引用的图像冲突。 例如。你可能有一个css文件 /Content/css/style.css =＆gt;在捆绑“〜/ Content / css” 其中图像被指定为

    .someclass { background-image:url(img/someimg.png) }

这会将图像解析为/Content/css/img/someimg.png

现在，您部署了发布版本，现在将css文件呈现为捆绑URL，例如 /内容/ CSS 现在图像URL解析为/Content/img/someimg.png

您可以在App_Start \ BundleConfig.cs

中更改此行为

    System.Web.Optimization.BundleTable.EnableOptimizations = false;

Answer 4

读者注意：请务必阅读@user2261073's comment和@Jeff's answer，了解自定义程序中的错误。这可能是你问题的原因。

---

未正确加载字体文件。检查文件是否在预期位置。

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

它也可能是一个mimetype问题。 Chrome的开发工具会在网络标签中显示已下载的字体：

引导程序定制程序似乎发送的大小不同于示例附带的整个引导程序包中的字体。如果您使用自定义引导程序，请尝试替换字体文件..

更新

您获得状态代码304，表示“未下载或在客户端缓存中修改的静态文件”。所以它与客户端缓存有关，需要一些窥探iis。

This will be helpful in solving your issue

Answer 5

在BundleConfig.cs文件的RegisterBundles（）中包含以下行为我工作。

System.Web.Optimization.BundleTable.EnableOptimizations = false;

Answer 6

运行Fiddler或使用浏览器开发人员工具上的网络选项卡。你应该寻找的是下载字体文件的请求的404结果。

还要确保发布的网站包含~/Fonts/glyphicons-halflings-regular.[eot,svg,ttf,woff]个文件。

您在计算的CSS规则中看到的差异是因为缩小的CSS文件（由web.config文件中的debug=true/false设置控制）。值\e013只是编写您正在看到的符号的另一种方式。

Answer 7

igorludi的解决方案应该可以正常工作。

我认为，我们可以通过以下方式告诉IIS处理这些“新”MIME类型：

• 选择网站;

• 转到IIS＆gt;＆gt; MIME类型;

• 添加新的扩展名和类型（请参阅igorludi答案的XML）。

• 重新启动网站。

Answer 8

我在使用MVC 5和Bootstrap v3.3.6时遇到了这个问题。

  

无法加载资源：服务器响应状态为404   （未找到）   http://NameOfSite/Error/NotFound?aspxerrorpath=/bundles/fonts/glyphicons-halflings-regular.woff2

您需要将@icon-font-path文件中的Content/bootstrap/variables.less从"../fonts/";更新为"/Content/fonts/";

Answer 9

1. 确保将.woff扩展名正确添加到您网站的IIS MIME类型中，以便排除可能的404错误

2. 通过删除以下web.config行来修复缓存问题，因为Internet Explorer似乎不喜欢它：

   <add name="Cache-Control" value="no-cache, no-store" />
   <add name="Pragma" value="no-cache" />
   

Answer 10

我也有这个问题。我使用的解决方案是在这个问题中： https://stackoverflow.com/questions/27254055/manually-added-directory-not-automatically-included-with-one-click-file-system-d

• 卸载项目
• 编辑csproj文件
• 更改无包含到相关字体文件的内容包含。

再次使用一键部署，即可发布文件。

Answer 11

您必须在 始终复制

上设置文件复制到输出目录的属性

Answer 12

我也有这个问题。您可以在IIS中的项目根目录中创建虚拟目录，而不必移动文件。

Answer 13

我遇到了同样的问题。如果仍然无法解决问题，则问题在于对图标档案的引用。

对于您的情况，参考应该是：“../ Content / themes / base / fonts / glyphicons-halflings-regular ...”

最后，如果你不理解我的英语很抱歉，因为我说西班牙语，我只是练习英语。 ：d

Answer 14

尝试<link rel="stylesheet" href="~/Content/bootstrap/bootstrap.css" />和 试试@Styles.Render("~/bootstrap/css") 我找到的唯一区别

Answer 15

您是否已将引导程序文件包含在项目中？只发布解决方案中包含的文件。

Answer 16

添加： BundleTable.EnableOptimizations = False 解决了我的问题。

Public Sub RegisterBundles(ByVal bundles As BundleCollection)
    BundleTable.EnableOptimizations = False
    bundles.Add(New StyleBundle("~/DefaultStyles").Include(
      "~/Content/custom3.css"))
End Sub

Answer 17

任何仍在寻找替代答案的人，在另一个StackOverflow answer上建议的这种方法可以解决问题。

更改.eot，.ttf和＆amp;的构建操作。 .woff文件到＆＃34;内容＆＃34;而不是默认值＆＃34;无＆＃34;。这样做解决了我的问题。