引导图标在本地加载，但在线时不加载

Posted 2023-03-06

【中文标题】引导图标在本地加载，但在线时不加载

【英文标题】：Bootstrap icons are loaded locally but not when online

【发布时间】：2013-11-08 23:11:12

【问题描述】：

基本上我得到了以下 html：

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

按钮上的图标在本地显示良好，但是当我在 Windows Azure 上运行时，我得到以下按钮，其前缀看起来很奇怪，而不是图标：

对此进行调查，我意识到在本地访问我的网站时，浏览器会尝试加载文件： /Content/fonts/glyphicons-halflings-regular.woff （它成功了） 当在线时（在天蓝色上），它会尝试在以下位置加载： /fonts/glyphicons-halflings-regular.woff

为什么不放它在本地做的 /Content 前缀。

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

我还通过以下方式捆绑内容：

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

文件结构如下：

bootstrap 也在寻找这样的文件：

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

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

【问题讨论】：

您是否尝试过修改您的 css 文件以指向正确的图像？与本地环境相比，您的服务器在所需语法方面会有所不同。您在服务器上的文件夹结构是什么？

你是否在打包css文件？

@jezzipin 好吧，我尝试将文件夹“fonts”添加到根目录，它现在可以工作了。但是现在“字体”文件夹既位于根目录下，又位于内容中。如何从 azure 中删除文件夹？我已从我的 Visual Studio 项目中删除该文件夹并发布它，但它仍在 Azure 上。

@GauravMantri 是的，我是

【参考方案1】：

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

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

modern.css 引用的字体像

../fonts/iconFont.eot

我们像这样捆绑 css 文件：

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

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

长话短说，我们最终更改了捆绑包名称：

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

一旦更改了捆绑包名称，一切就开始正常工作了。

【讨论】：

我明白了。我已使用有关我的包和文件位置的信息更新了我的问题。我已经明白了，就像你说的那样，我已经猜到了——但问题仍然存在。它的引用方式如下：../fonts/glyphicons-halflings-regular.woff 所以我认为它会查找一个文件夹，例如。到内容文件夹而不是根文件夹。

尝试将~/Content/bootstrapcss 更改为~/Content/bootstrapcss/bootstrap，这应该会有所作为。基本上，当捆绑bootstrapcss 成为应用程序根目录中Content 文件夹中的文件名时，寻找Fonts 文件夹。如果 css 文件引用 ../fonts 之类的字体，则它位于 Content 文件夹上方。添加另一个名称将使 css 上升到 Content 文件夹，然后在其中查找 Fonts 文件夹。

@GauravMantri，我的字体文件夹位于根目录，但我仍然遇到同样的问题。我该怎么办？提前致谢。

改变这个使得css不能在本地加载..这个分辨率对我没有帮助

更改捆绑包名称有效！...在发布目录中，我现在看到“内容”文件夹，并且应用程序运行正常。谢谢

【参考方案2】：

改变路径确实有效，但“已回答的问题”错过了一个关键点。

如果您使用的是引用捆绑包的 _Layout.cshtml，这将不再在本地和 Azure 上工作。

您也需要更新_Layout.cshtml 页面！

因此，如果您将捆绑路径从 Content/css 更改为 Scripts/css，那么您需要分别将 _Layout.cshtml 更改为 @Styles.Render("~/Scripts/css")。

【参考方案3】：

在发布到 Azure Web 服务时，使用 ASP.NET Core 2.0 MVC Web 应用程序遇到此错误。

我的样式表包含在以下代码中。

 <environment include="Development">
        <link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet">
        <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" />
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
 </environment>

只需将链接复制并粘贴到开发工作之外的任何环境中

<environment exclude="Development">
  <link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" />
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="~/css/site.css" />
  <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
  />
  <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

【参考方案4】：

如果您下载了包含引导图标的 theme.zip 或 theme.rar，请在解压缩之前执行以下操作：

右键点击压缩包 选中“取消阻止”框（如果可见）

【参考方案5】：

为了使图标正常工作-我必须在图像所在的文件夹上将文件夹权限设置为“everyone = read”