Twitter Bootstrap图标在发布模式下无法显示404。

Question

Twitter Bootstrap图标在发布模式下无法显示404。

c#asp.netasp.net-mvctwitter-bootstrapglyphicons

34

我正在ASP.NET MVC 4项目中工作，并完成了以下步骤：

从http://blog.getbootstrap.com/2013/12/05/bootstrap-3-0-3-released/下载了Twitter Bootstrap。
将字体文件的构建操作设置为Content（文件位于~/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 (Not Found) test:1

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.ttf 404 (Not Found) test:1

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.svg 404 (Not Found) test:1

谢谢。

- 22db05

WOFF文件的mimeType应该是<mimeMap fileExtension=".woff" mimeType="application/font-woff" />吗？ - Giles Roberts

谢谢您展示第四部分，那正是我需要了解的内容，关于如何在Twitter Bootstrap中使用glyphicons。 - Kai Hartmann

7个回答

23

将字体文件夹复制到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 MIME 类型与问题中的不同。

- Giles Roberts

1

我仍然拥有Bootstrap文件夹（~/Content/themes/default/libs/bootstrap/fonts）中的字体，并且在web.config中设置了扩展名，现在它可以正常工作了。谢谢！ - Tobias

9

我曾经遇到过同样的问题，使用的是IIS 7.5 web服务器。

解决方法是在Web服务器上将.woff添加到文件扩展名列表中，并将MIME类型设置为application/octet-stream。

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

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

- Heimdalingen

对我有用。注意：在Web.Config中的<system.webServer>标记内放置<staticContent>。 woff2也需要做同样的操作。 - GraehamF

7

我曾经遇到过这个问题，后来发现是在release模式下进行缩小处理时造成的。

与其手动从bootstrap网站下载文件并配置捆绑，不如使用nuget包为我完成这些操作。

如果您想这么做，请按以下步骤操作：

运行以下命令安装Bootstrap：

Install-Package Twitter.Bootstrap.MVC

这将下载所有的 Bootstrap 文件，并包含以下预定义的 Bootstrap bundle 配置：

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应用程序的根目录。

要在本地测试它，只需从Web配置中删除debug="true"即可避免部署到AppHarbor。

- hutchonoid

1

最终我将字体文件夹移动到根目录。谢谢。 - 22db05

不错。我很惊讶为什么没有更多的人遇到同样的问题。 - hutchonoid

这对我来说是一个彻头彻尾的灾难。很高兴在进行此操作之前在Git中进行了检查点。不得不回退。看起来Twitter.Bootstrap.MVC有点不稳定，最新版本存在构建错误。最终我去了这里https://dev59.com/42Ik5IYBdhLWcg3wE6Z8，做出了最后的还原决定，认为这还没有准备好投入使用。最终我只是按照问题中指定的方式修改了mimeTypes并将字体文件夹复制到根目录，然后一切都正常工作了。 - Giles Roberts

实际上，这只是确保StyleBundle的捆绑路径与实际路径相同的问题。因此，应该使用~~/Content而不是~~/bundles。 - Facio Ratio

Twitter.Bootstrap.MVC现已弃用，只需使用“bootstrap”包即可。https://www.nuget.org/packages/Bootstrap - Mason240

4

我有同样的问题。我不知道为什么，但如果我移除bootstrap.min.css文件并在bundle上设置CssRewriteUrlTransform，一切都会正常工作。我使用的是bootstrap v3.1.1。

编辑：经过一些调查，解决方案在这里定义：CssRewriteUrlTransform未被调用因此，移除bootstrap.min.css或引用bootstrap.min.css而不是bootstrap.css将强制对您的文件进行捆绑/缩小，并因此调用CssRewriteUrlTransform。

- asidis

1

我遇到了同样的问题。我通过使用Bootstrap的CDN来解决它。

- Gary Brunton

0

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

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

- Andy T

字体文件夹位于内容文件夹内，应该被现有的IgnoreRoute忽略。 - 22db05

它不在我们在VS2013中创建的模板项目中，而是在根目录中。 - user755404

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

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

- Jasen · 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

然后我在Bundle配置中添加了另一个虚拟路径级别。

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>