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

Bootstrap Icons not showing in published ASP.NET MVC application

提问by sabotero

--- NB: Go to the EDITED 2 section for summary ----

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

I have an ASP.NT MVC (4) application. I integrated (twitter)Bootstrap to it. Bootstrap is working perfectly, but the icons does not show correctly when I publish the application.

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

I tried to republish the application without success.

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

For clarify I put some images here below.

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

When I run my application from VS2013 the result is this (which is OK):

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

In booth, IE and Chrome.

在展位，IE 和 Chrome。

But when I run the published application the result is this (which is NOT ok):

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

• Chrome

• 铬合金

• IE (10)

• 浏览器 (10)

This problem has, somehow, to be with the evaluated CSS but I don't know at which point this could be happening.

不知何故，这个问题与评估的 CSS 有关，但我不知道这可能发生在哪一点。

The evaluated css in the local application are this (which is OK):

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

• Chrome

• 铬合金

• IE

• IE

But In the published application I have this (which is NOT ok):

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

• Chrome:

• 铬合金：

• IE:

• IE：

Some has experienced this behavior?

有人经历过这种行为吗？

What can I do for solve this weird problem?

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

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

--------------------------- 编辑 -------------- --------

I get the font files (.eot, .svg, .ttfand .woff) to be included when publishing my application. When I access the default page (application root http://localhost/) which is the page showing the icons the files being showed in the Chrome's Developper Tools Network tab are:

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

Before including the files I was getting 404 errors for the files, so I could guess they continue to be requested even if they are not showed in the Network Tab.

在包含文件之前，我收到了文件的 404 错误，因此我猜测即使它们未显示在“网络”选项卡中，也会继续请求它们。

Though, the icons are not showed correctly.

但是，图标显示不正确。

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

------------------------ 编辑 2 ------------------------ ---

Well, I restart my site in the IIS 7. And the request start to be triggered. These are the file requests showed in the Chrome's Developper Tools Network Tab:

好吧，我在 IIS 7 中重新启动了我的站点。并且请求开始被触发。这些是 Chrome 的开发人员工具网络选项卡中显示的文件请求：

The resquest is then looking for the files in: /Content/themes/fonts/but they are in: /Content/themes/base/fonts/

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

The basefolder containt a bootstrapfolder which containt the bootstrap.cssfile. In the CSS file there are this class referening the fonts files:

该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');
}

It seems the references to the fonts files are good as the the files tree is this:

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

I could change the class to be:

我可以将课程更改为：

@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');
    }

But, I would actually know what this is happening and how to solve it! Besides, the icons will be showed in the published site but not in the local site (running from VS2013 with iisexpress). Thank you in advance for your help!

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

采纳答案by Jeremy Ray Brown

If your bundling your scripts and CSS then assets like images may not be found.

如果您将脚本和 CSS 捆绑在一起，则可能找不到像图像这样的资产。

In your BundleConfig.cs file, create your bundle with CssRewriteUrlTransform:

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

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

Include in _Layout.cshtml:

包含在 _Layout.cshtml 中：

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

Everything should be good. And yes, viewing what's happening over the network to see what URL is generating the 404s will help.

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

EDIT: Ensure you are using Microsoft.AspNet.Web.Optimization v1.1.0. Confirmed version 1.1.3 causes this error as well.

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

回答by igorludi

IIS doesn't know how to handle (serve) those files (MIMEs).

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

Add this to your system.webServer node in the web.config file and you'll be golden:

将此添加到 web.config 文件中的 system.webServer 节点，您将获得成功：

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

--Edited, see Ryans and mine comment below: Even better, to be safe, remove and add the mime type maping:

--已编辑，请参阅下面的 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>

回答by gd73

Try disabling bundle optimizations, what happens is that the path to the bundled css stylesheet conflicts with referenced images. For example. You might have a css file /Content/css/style.css => in a bundle "~/Content/css" in which an image is specified as such

尝试禁用捆绑优化，发生的情况是捆绑的 css 样式表的路径与引用的图像冲突。例如。您可能有一个 css 文件 /Content/css/style.css => 在一个包“~/Content/css”中，其中指定了一个图像

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

This would resolve the image to /Content/css/img/someimg.png

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

Now you deploy the release build and the css file is now rendered to a bundle URL such as /Content/css Now the image URL resolves to /Content/img/someimg.png

现在您部署发布版本，并且 css 文件现在呈现为一个包 URL，例如 /Content/css 现在图像 URL 解析为 /Content/img/someimg.png

You can change this behaviour in App_Start\BundleConfig.cs

您可以在 App_Start\BundleConfig.cs 中更改此行为

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

回答by Kna?is

Run Fiddler or use the network tab on your browser's developer tools. What you should look for is 404 results for the requests that download the font files.

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

Also make sure that the published site contains ~/Fonts/glyphicons-halflings-regular.[eot,svg,ttf,woff]files.

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

The differences you are seeing in the computed CSS rules are because of minified CSS files (controlled by debug=true/falsesetting in web.config file). The value \e013is just another way of writing the symbol you are seeing.

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

回答by Sakthivel

Note to readers: be sure to read @user2261073's commentand @Jeff's answerconcerning a bug in the customizer. It's likely the cause of your problem.

读者注意事项：请务必阅读@user2261073 的评论和@Jeff关于定制器中错误的回答。这很可能是您的问题的原因。

---

---

The font file isn't being loaded correctly. Check if the files are in their expected location.

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

@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');
}

It might also be a mimetype issue. Chrome's dev tools show downloaded fonts in the network tab:

这也可能是一个 mimetype 问题。Chrome 的开发工具在网络选项卡中显示下载的字体：

The bootstrap customizer seems to be sending different sized fonts than the ones that are inside the whole bootstrap package that comes with the examples. If you use customized bootstrap, try replacing font files..

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

Update

更新

You get a status code 304 which represents "not modified static files that downloaded or in client cache." So its related to client cache and requires some peek into iis.

您会得到一个状态代码 304，它表示“未修改已下载或在客户端缓存中的静态文件”。所以它与客户端缓存有关，需要深入了解 iis。

This will be helpful in solving your issue

这将有助于解决您的问题

回答by Divyans Mahansaria

Including the below line in RegisterBundles() of BundleConfig.cs file worked for me.

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

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

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

回答by usefulBee

1. Make sure .woff extension is added correctly to IIS MIME Types of your website in order to get rid off possible 404 errors

2. Fix caching issues by removing the following web.config lines because Internet Explorer does not seem to like it:

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

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

回答by S_R

The solution from igorludi should working fine.

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

And I think, we can tell the IIS to handles those "new" MIME TYPE by:

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

• Select the site;

• Go to IIS >> MIME Types;

• Adds those new extension and type (see the XML on igorludi answer).

• Restart the site.

• 选择站点；

• 转到 IIS >> MIME 类型；

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

• 重新启动站点。

回答by Mason240

I was also having this issue with MVC 5 and Bootstrap v3.3.6.

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

Failed to load resource: the server responded with a status of 404 (Not Found) http://NameOfSite/Error/NotFound?aspxerrorpath=/bundles/fonts/glyphicons-halflings-regular.woff2

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

You need to update the @icon-font-pathin theContent/bootstrap/variables.lessfile from "../fonts/";to "/Content/fonts/";

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

回答by JoshYates1980

adding: BundleTable.EnableOptimizations = Falsefixed my issue.

添加：BundleTable.EnableOptimizations = False修复了我的问题。

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