asp.net-mvc - 如何在 ASP.NET MVC4 中包含 Bootstrap 图标？

Question

基本上，经过大量工作后，我终于设法在我的 ASP.NET MVC4 项目中启动并运行 Bootstrap。

这是我的文件夹结构:

这是我的包配置:

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrapjs").Include(
                        "~/Scripts/bootstrap.js"));

            bundles.Add(new ScriptBundle("~/Content/bootstrapcss").Include(
                        "~/Content/bootstrap.css",
                        "~/Content/bootstrap-responsive.css"));
         }

但是，当我尝试添加带有图标的 HTML 元素时:

<button type="submit" class="btn"><i class="icon-search"></i></button>

图标没有出现。

Answer 1

最后一个包需要是 StyleBundle，而不是 ScriptBundle。这是我的一个项目中的示例:

bundles.Add(new StyleBundle("~/bundles/css").Include(
                        "~/content/css/bootstrap.min.css",
                        "~/content/css/font-awesome.min.css",
                        "~/content/css/common.css"));

我应该注意我将我的 CSS 文件组织到一个特定的文件夹中，这个特定的项目使用 FontAwesome代替 Glyphicons。

如评论所述，默认的 Bootstrap 包假定 CSS 文件位于一个文件夹中，而图标 Sprite 文件位于与 CSS 文件夹同一级别的另一个文件夹中。基于该假设， Sprite 的路径设置为 "../img/glyphicons-halflings.png"。如果您的文件不在同一位置，您需要手动编辑路径，或使用 Customizer 构建一个具有正确路径的下载文件，该下载路径适用于 sprite 文件的浅色和深色版本。