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

Question

--- 注意：转到 EDITED 2 部分进行总结----

我有一个 ASP.NT MVC (4) 应用程序。我将 (twitter)Bootstrap 集成到它。 Bootstrap 运行良好，但在我发布应用程序时图标显示不正确。

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

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

当我从 VS2013 运行我的应用程序时，结果是这样的（没关系）：

在展位，IE 和 Chrome。

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

• 铬

• IE (10)

不知何故，这个问题与评估的 CSS 相关，但我不知道这会在什么时候发生。

本地应用程序中评估的 css 是这样的（没关系）：

• 铬

• IE

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

• 铬：

• IE：

有些人经历过这种行为？

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

--------------- 已编辑 ------------------- ------------

在发布我的应用程序时，我得到了要包含的字体文件（.eot、.svg、.ttf 和 .woff）。 当我访问默认页面（应用程序根 http://localhost/）时，该页面显示了 Chrome 的开发者工具网络选项卡中显示的文件的图标：

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

不过，图标显示不正确。

------------ 已编辑 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');
    }

但是，我实际上会知道发生了什么以及如何解决它！ 此外，图标将显示在已发布的站点中，但不会显示在本地站点中（从 VS2013 和 iisexpress 运行）。 提前感谢您的帮助！

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

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

将 .eot、.ttf 和 .woff 文件的构建操作更改为“内容”，而不是默认值“无”。这样做解决了我的问题。

Answer 3

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 4

添加：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 5

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

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

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

Answer 6

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 类型映射：

<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 7

在 BundleConfig.cs 文件的 RegisterBundles() 中包含以下行对我有用。

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

Answer 8

您必须在始终复制

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

Answer 9

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

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

再次使用一键部署，文件就发布了。

Answer 10

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

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

• 选择站点；

• 转到 IIS >> MIME 类型；

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

• 重启网站。

Answer 11

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

Answer 12

我遇到了同样的问题。如果还是不能解决，问题出在图标档案的参考上。

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

最后，如果你听不懂我的英语对不起，因为我说西班牙语，我只是在练习英语。 :D

Answer 13

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

Answer 14

读者注意：请务必阅读@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 15

您是否将引导文件包含在项目中？只有包含在解决方案中的文件才会被发布。

Answer 16

尝试禁用捆绑优化，会发生捆绑的 css 样式表的路径与引用的图像冲突。 例如。你可能有一个css文件 /Content/css/style.css => 在包“~/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 17

运行 Fiddler 或使用浏览器开发者工具上的网络标签。您应该寻找下载字体文件的请求的 404 结果。

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

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