在带有Bootstrap捆绑的ASP.NET MVC应用程序中使用Glyphicons

Question

我有一个包含引导的ASP.NET MVC应用程序。我的目录结构如下所示：

/ 
    /App_Start 
    BundleConfig.cs 
    /Content 
    app.css 
    bootstrap.min.css 
    /Fonts 
    glyphicons-halflings-regular.eot 
    glyphicons-halflings-regular.svg 
    glyphicons-halflings-regular.ttf 
    glyphicons-halflings-regular.woff 
    glyphicons-halflings-regular.woff2 

我需要将Bootstrap捆绑到我的应用程序中。在我的BundleConfig.cs文件中，我有以下内容：

public static void RegisterBundles(BundleCollection bundles) 
{ 
    bundles.Add(new StyleBundle("~/public/bundles/css") 
    .Include("~/Content/bootstrap.min.css") 
    .Include("~/Content/app.css") 
); 

    bundles.Add(new ScriptBundle("~/public/bundles/scripts") 
    .Include("~/Scripts/jquery-2.1.4.min.js") 
    .Include("~/Scripts/jquery-ui-1.11.4.min.js") 
    .Include("~/Scripts/bootstrap.min.js") 
    .Include("~/Scripts/jquery.validate.min.js") 
    .Include("~/Scripts/jquery.validate.unobtrusive.min.js") 
); 
} 

当捆绑关闭时，一切都呈现良好。当我打开打包时，一切都呈现良好，，除了用于字体图标。当我查看控制台窗口时，发现5 404个与字体图标相关的错误。它就像它尝试引用的字体文件类似如下：

http://localhost:9090/public/fonts/glyphicons-halflings-regular.woff2

然而，他们没有在公共目录中。我不知道如何解决这个问题。

Answer 1

的问题是，字体使用的是相对URL引用：

../fonts/glyphicons-halflings-regular.woff2 

你的CSS束从一个网址提供的文件夹~/public/bundles/英寸由于相对URL仅指定一个单一的“父文件夹”导航，字体URL作为~/public/fonts/...结束。

似乎有三种选择：

1. 更新在bootstrap.min.css文件中的字体的URL使用../../fonts/... - 你需要记住每次更新的引导文件后重新申请这一变化;

2. 更改您的捆绑网址具有相同的文件夹深度的CSS文件 - 像~/public/css;

3. 将a CssRewriteUrlTransform添加到您的包中。这会将相对URL重写为绝对URL。

如：

bundles.Add(new StyleBundle("~/public/bundles/css") 
    .Include("~/Content/bootstrap.min.css", new CssRewriteUrlTransform()) 
    .Include("~/Content/app.css") 
);