引导图标在本地加载，但在线时无法加载。

Question

引导图标在本地加载，但在线时无法加载。

cssimagetwitter-bootstrapazuretwitter-bootstrap-3

11

基本上我得到了以下的HTML：

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

本地环境下，图标在按钮上显示正常，但在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文件夹中寻找，而不是根目录，因为它目前驻留在Content/bootstrapcss文件夹中。

- Jordan Axe

你尝试过修改CSS文件以指向正确的图像吗？与本地环境相比，服务器所需的语法可能会有所不同。你的服务器上的文件夹结构是什么样的？ - jezzipin

你有没有偶然打包CSS文件？ - Gaurav Mantri

@jezzipin 我尝试将文件夹“fonts”添加到根目录，现在它可以正常工作了。但是现在“fonts”文件夹既位于根目录又位于内容中。如何从Azure中删除文件夹？我已经从Visual Studio项目中删除了该文件夹并发布了它，但它仍然存在于Azure中。 - Jordan Axe

@GauravMantri 是的，我是。 - Jordan Axe

5个回答

2

更改路径确实有效，但是“回答的问题”忽略了一个重要的点。

如果您正在使用引用bundle的“_Layout.cshtml”，则此方法在本地和Azure上将不再起作用。

您还需要更新“_Layout.cshtml”页面！

因此，如果您将bundles路径从“Content/css”更改为“Scripts/css”，那么您需要相应地更改“_Layout.cshtml”为“@Styles.Render（“~ / Scripts / css”）”。

- user2903379

1

遇到了ASP.NET Core 2.0 MVC Web应用程序发布到Azure 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>

- Preshen

0

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

右键单击压缩包
如果可见，请勾选“取消锁定”复选框

- JoshYates1980

0

为了使图标正常工作，我不得不将图像所在的文件夹权限设置为“所有人=读取”

- cagedwhale

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gaurav Mantri · Accepted Answer

我们最近也遇到了类似的问题（尽管我们使用的是 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目录中寻找字体，但显然那里没有。

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

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

一旦捆绑包名称更改，事情开始正常运行。