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

前端之家收集整理的这篇文章主要介绍了css – Bootstrap图标未显示在已发布的ASP.NET MVC应用程序中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
—注意:转到EDITED 2部分进行总结—-

我有一个ASP.NT MVC(4)应用程序。我集成了(twitter)Bootstrap。
Bootstrap工作正常,但是当我发布应用程序时,图标无法正确显示

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

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

当我从VS2013运行我的应用程序时,结果就是这样(这没关系):

在展台,IE和Chrome。

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

> Chrome

> IE(10)

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

本地应用程序中评估的css是这样的(可以):

> Chrome

> IE

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

> Chrome:

> IE:

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

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

————————— EDITED ———————- ——–

我发布我的应用程序时要包含的字体文件(.eot,.svg,.ttf和.woff)。
当我访问默认页面(应用程序根http:// localhost /)时,显示图标的页面显示Chrome的“开发人员工具网络”选项卡中显示文件是:

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

但是,图标显示不正确。

———————— EDITED 2 ———————— —

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

然后resquest正在寻找:/ Content / themes / fonts /中的文件,但它们位于:/ Content / themes / base / fonts /

基本文件夹包含一个引导文件夹,其中包含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运行)。
预先感谢您的帮助!

解决方法

如果捆绑脚本和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将有所帮助。

猜你在找的CSS相关文章