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

Question

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

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

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

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

当我从 VS2013 运行我的应用程序时，结果是这样的(没问题):

在展台上，IE 和 Chrome。

但是当我运行已发布的应用程序时，结果是这样的(这是不对的):

• Chrome

• IE (10)

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

本地应用程序中评估的 css 是这样的(没问题):

• Chrome

• 浏览器

但是在已发布的应用程序中我有这个(这是不正确的):

• Chrome :

• 即:

有人经历过这种行为吗？

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

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

我获取字体文件(.eot、.svg、.ttf 和 .woff)到发布我的申请时包括在内。当我访问默认页面(应用程序根 http://localhost/)时，该页面显示图标，Chrome 的开发人员工具网络选项卡中显示的文件是:

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

不过，图标显示不正确。

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

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

请求然后在以下位置查找文件:/Content/themes/fonts/ 但它们位于:/Content/themes/基础/字体/

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

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>