Question

基本上我得到了以下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（它成功完成）在线时（天蓝色），它会尝试加载： /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文件夹中。

Answer 1

我们最近遇到了类似的问题（虽然我们使用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"));

更改软件包名称后，事情就开始正常运行了。

Answer 2

改变路径确实有效，但回答的问题是＆＃39;错过了一个重要的观点。

如果您正在使用引用该捆绑包的_Layout.cshtml，则无法再在本地和Azure上使用。

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

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

Answer 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>

Answer 4

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

右键单击压缩包
选中方框＆＃34;取消阻止＆＃34;如果可见

Answer 5

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

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

5 个答案: