Bootstrap 图标在本地加载，但在线时不加载 [英] Bootstrap icons are loaded locally but not when online

问题描述

基本上我得到了以下 HTML:

Basically I got the following HTML:

<button class="disabled btn-primary btn" type="submit" disabled="">
   <i class="glyphicon glyphicon-ban-circle"></i>
   Log in
</button>

本地图标在按钮上显示正常，但是当我在 Windows Azure 上运行时，我得到以下带有奇怪外观前缀而不是图标的按钮:

Locally the icon displays fine on the button but when I run on Windows Azure I get the following button with a weird looks prefix instead of the icon:

对此，我意识到在本地访问我的网站时，浏览器会尝试加载文件:/Content/fonts/glyphicons-halflings-regular.woff(它成功了)当在线(在 azure 上)时，它会尝试在以下位置加载:/fonts/glyphicons-halflings-regular.woff

Looking into this, I realized that when accessing my website locally the browser would attempt to load the file: /Content/fonts/glyphicons-halflings-regular.woff (which it did successfully) while when online (on azure) it would attempt to load at: /fonts/glyphicons-halflings-regular.woff

为什么不把它在本地做的/Content 前缀.

Why does it not put the /Content prefix that it does locally.

我使用的是标准引导程序文件，它是在本地和在线运行的完全相同的网站.

I'm using the standard bootstrap files and it is the EXACT same websites running locally and online.

我还通过以下方式打包内容:

Also I'm bundling the content the following way:

    bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include(
                "~/Content/bootstrap/bootstrap.css"));

文件结构如下:

bootstrap 也在寻找这样的文件:

Also bootstrap is looking for the files like this:

url('../fonts/glyphicons-halflings-regular.woff') 

所以我认为它会在 Content 文件夹中查找，而不是在 root 中查找，因为它当前位于 Content/bootstrapcss 文件夹中.

So I would suppose it would look in the Content folder and not root since it currently resides in the Content/bootstrapcss folder.

推荐答案

我们最近遇到了类似的问题(尽管我们使用的是 metroUI - http://metroui.org.ua/).本质上，事实证明我们捆绑了 css 文件，因此当我们在 Windows Azure 中部署应用程序时，没有加载任何字体.

We recently had similar issue (though we were using metroUI - http://metroui.org.ua/). Essentially it turned out we were bundling the css files and because of that when we deployed the application in Windows Azure, none of the fonts were loaded.

在我们的例子中，我们有以下目录结构:

In our case, we had the following directory structure:

和 modern.css 引用了像

and modern.css was referencing fonts like

../fonts/iconFont.eot

我们像这样捆绑了 css 文件:

and we were bundling the css file like this:

bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/css/modern.css",
                "~/Content/css/modern-responsive.css"));

由于捆绑，应用程序在应用程序根目录下的 /fonts 目录中寻找字体，而这显然不存在.

Because of bundling, the application was looking for fonts in /fonts directory at the application root which was obviously not there.

长话短说，我们最终更改了包名称:

Long story short, we ended up changing the bundle name:

bundles.Add(new StyleBundle("~/Content/css/metroUI").Include(
                "~/Content/css/modern.css",
                "~/Content/css/modern-responsive.css"));

更改包名称后，一切开始正常运行.

Once the bundle name was changed, things started working properly.

这篇关于Bootstrap 图标在本地加载，但在线时不加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！