引导图标在本地而不是在网上装 [英] 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上运行我得到一个奇怪的以下按钮看起来preFIX代替图标：

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

为什么它不把/内容preFIX它确实在本地

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"));

和文件结构如下所示：

自举也正在寻找这样的文件：

Also bootstrap is looking for the files like this:

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

所以，我想这将看在内容文件夹，不是根用户，因为它目前居住在内容/ 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"));

由于捆绑销售，应用在 /字体目录的应用程序根这显然不是那里寻找字体。

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屋！