css - Bootstrap 图标在本地加载,但在线时不加载

标签 css image twitter-bootstrap azure twitter-bootstrap-3

基本上我得到了以下 HTML:

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

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

enter image description here 考虑到这一点,我意识到当本地访问我的网站时,浏览器会尝试加载文件: /Content/fonts/glyphicons-halflings-regular.woff (它成功了) 而在线时(在 azure 上)它会尝试加载: /fonts/glyphicons-halflings-regular.woff

为什么它不添加本地的/Content 前缀。

我使用的是标准 Bootstrap 文件,它与本地和在线运行的网站完全相同。

此外,我还通过以下方式捆绑内容:

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

文件结构如下所示:

enter image description here

Bootstrap 也在寻找这样的文件:

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

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

最佳答案

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

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

enter image description here

modern.css 引用了类似的字体

../fonts/iconFont.eot

我们像这样捆绑 css 文件:

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

由于捆绑,应用程序正在应用程序根目录的 /fonts 目录中查找字体,但该目录显然不存在。

长话短说,我们最终更改了 bundle 名称:

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

一旦更改了 bundle 名称,一切就开始正常工作。

关于css - Bootstrap 图标在本地加载,但在线时不加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19664287/

相关文章:

image - 使用 openCV 检测特定颜色(或灰度)的圆圈

php - 两个图像按钮或两个提交

html - 以 100% 高度填充表格单元格的 Div

javascript - 覆盖 Bootstrap 表选定的行背景颜色

html - 非常基本的 CSS 不会听取 HTML Div

php - 如何在 html/css 网站的页面中嵌入 php/javascript 照片库?

html - 悬停时如何更改很多img

javascript - 使用多个不同的按钮在购物车中添加多个元素(添加到购物车)

jquery - 表格单元格侧边栏不折叠(动画宽度)

javascript - 单击 <a> 标签时 Bootstrap 模式无法正确显示