引导图标在本地加载，但不在线时加载 [英] 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（它确实成功）
当在线（在天蓝色）它会尝试加载：
/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"));

文件结构如下：

查找如下文件：

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.

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