c# - Twitter bootstrap glyphicons 不会出现在发布模式 404 中

Question

我正在处理 ASP.NET MVC 4 中的一个项目，我执行了以下步骤：

从http://blog.getbootstrap.com/2013/12/05/bootstrap-3-0-3-released/下载 twitter 引导程序

将字体文件的构建操作设置为内容（文件位于 ~/Content/font 文件夹中）

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

添加到 RouteConfig.cs

routes.IgnoreRoute("{folder}/{*pathInfo}", new { folder = "Content" });

向 Web.config 添加了以下元素

<?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
   <staticContent>
       <remove fileExtension=".eot" />
       <remove fileExtension=".ttf" />
       <remove fileExtension=".otf"/>
       <remove fileExtension=".woff"/>
       <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
       <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
       <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
   </staticContent>
</system.webServer>

在 BundleConfig.cs 中包含以下代码

bundles.Add(new StyleBundle("~/bundles/maincss")
                    .Include("~/Content/bootstrap/bootstrap.css")
                    .Include("~/Content/bootstrap/bootstrap-theme.css")
                    .Include("~/Content/hbl-full.css"));

还尝试了以下代码

IItemTransform cssFixer = new CssRewriteUrlTransform();

bundles.Add(new StyleBundle("~/bundles/maincss")
                    .Include("~/Content/bootstrap/bootstrap.css", cssFixer)
                    .Include("~/Content/bootstrap/bootstrap-theme.css", cssFixer)
                    .Include("~/Content/hbl-full.css", cssFixer));

在主 Layout.cshtml 中调用

@Styles.Render("~/bundles/maincss")

仍然在本地主机中正常显示图标，但是当我推送代码以发布服务器时，我只能看到方形而不是图标，并且在 Chrome 的控制台选项卡中我得到

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.woff 404（未找到）测试：1

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.ttf 404（未找到）测试：1

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.svg 404（未找到）测试：1

谢谢你。

score 25 · Accepted Answer

这是我解决它的方法——我正在使用MVC5和Bootstrap 3.1.1。

我在项目中组织了我的文件，如下所示：

/Content/Bootstrap/bootstrap.css
                   bootstrap.min.css
/Content/fonts/glyphicons-halflings-regular.eot
               glyphicons-halflings-regular.svg
               glyphicons-halflings-regular.ttf
               glyphicons-halflings-regular.woff

然后我在捆绑配置中的虚拟路径中添加了另一个级别

bundles.Add(new StyleBundle("~/Content/site/css").Include(
    "~/Content/bootstrap/bootstrap.css",
    "~/Content/styles/site.css"
));

以前我用过~/Content/css

并且在视图中...

@Styles.Render("~/Content/site/css")

这行得通，但我仍然在其中一种字体上得到 404 ......所以我添加了 Giles 的解决方案。

<?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
    <staticContent>
        <remove fileExtension=".eot" />
        <remove fileExtension=".ttf" />
        <remove fileExtension=".otf"/>
        <remove fileExtension=".woff"/>
        <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
        <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
        <mimeMap fileExtension=".otf" mimeType="font/otf" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
</system.webServer>

score 23 · Accepted Answer

将字体文件夹复制到 Web 应用程序的根目录，并将 web.config 中的 mime 类型更改为

<?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
  <staticContent>
    <remove fileExtension=".eot" />
    <remove fileExtension=".ttf" />
    <remove fileExtension=".otf"/>
    <remove fileExtension=".woff"/>
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
    <mimeMap fileExtension=".otf" mimeType="font/otf" />
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  </staticContent>
</system.webServer>

为我解决了这个问题。请注意，.woff mimeType 与问题中的不同。

score 9 · Accepted Answer

我有同样的问题，使用 IIS 7.5 网络服务器。

解决方案是将 .woff 添加到 Web 服务器上具有 MIME 类型 application/octet-stream 的文件扩展名列表中。

你也可以在 web.config 中实现同样的效果：

<staticContent>
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
</staticContent>

score 7 · Accepted Answer

我遇到了这个问题，我发现它是由于在发布模式下构建时的缩小而发生的。

我没有从引导站点手动下载文件并配置捆绑，而是使用为我完成的 nuget 包。

如果您想这样做，请执行以下步骤。

运行以下命令来安装 Bootstrap：

Install-Package Twitter.Bootstrap.MVC

这将下载所有引导程序文件并包括以下预定义的引导程序包配置：

public class BootstrapBundleConfig
{
    public static void RegisterBundles()
    {
        // Add @Styles.Render("~/Content/bootstrap") in the <head/> of your _Layout.cshtml view
        // For Bootstrap theme add @Styles.Render("~/Content/bootstrap-theme") in the <head/> of your _Layout.cshtml view
        // Add @Scripts.Render("~/bundles/bootstrap") after jQuery in your _Layout.cshtml view
        // When <compilation debug="true" />, MVC4 will render the full readable version. When set to <compilation debug="false" />, the minified version will be rendered automatically
        BundleTable.Bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
        BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap").Include("~/Content/bootstrap.css"));
        BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap-theme").Include("~/Content/bootstrap-theme.css"));
    }
}

上面还包括描述如何渲染包的注释。

我认为最初的 404 字体错误是由于字体文件夹与缩小的 css 中指定的级别不同。

如果您希望保留当前的解决方案，我可以修复 404 的唯一方法是将字体文件夹复制到 Web 应用程序的根目录。

要在本地测试它，只需debug="true"从您的 Web 配置中删除以保存部署到 AppHarbor。

score 4 · Accepted Answer

我遇到过同样的问题。我真的不知道为什么，但是如果我删除 bootstrap.min.css 文件并在包上设置 CssRewriteUrlTransform 一切正常。我正在使用引导程序 v3.1.1

编辑：经过一番调查，这里定义了解决方案：没有调用 CssRewriteUrlTransform 所以删除 bootstrap.min.css 或引用 bootstrap.min.css 而不是 bootstrap.css 将强制对文件进行捆绑/缩小，因此它会调用CssRewriteUrlTransform。

score 1 · Accepted Answer

1

我有同样的问题。我通过使用引导程序的 CDN 解决了这个问题。

于 2014-01-23T03:07:22.837 回答

score 0 · Accepted Answer

在中IgnoreRoute，您指定了“内容”文件夹。尝试为字体添加一个”，因为这是您的要求。

routes.IgnoreRoute("{folder}/{*pathInfo}", new { folder = "fonts" });

c# - Twitter bootstrap glyphicons 不会出现在发布模式 404 中

7 回答 7

Related

Reference