如何在ASP.NET MVC4中包含Bootstrap图标？

Question

经过一番努力，我终于成功地在我的ASP.NET MVC4项目中使用了Bootstrap。

这是我的文件夹结构:

这是我的bundleconfig:

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>

图标未显示。

- John Mayer

Answer 1

最后一个 bundle 需要是一个 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文件在一个文件夹中，图标精灵文件在与CSS文件夹相同级别的另一个文件夹中。基于这种假设，精灵的路径被设置为"../img/glyphicons-halflings.png"。如果您的文件不在相同的位置，则需要手动编辑路径，或使用自定义工具来构建下载具有正确路径的精灵文件的浅色和深色版本。

- Tieson T.

---

好的，Bootstrap 正试图从哪个确切路径加载精灵文件？ - Tieson T.

它试图从以下位置加载： /img/glyphicons-halflings.png - John Mayer

是的，如果没有初始的 .，该路径将从站点根目录解析。因此，要么将其更改为 /content/img/glyphicons-halflings.png，要么在开头添加 .。 - Tieson T.

抱歉听起来有些愚蠢。但是我在哪里更改为/content或添加点呢？ - John Mayer

如果您使用的是2.3.2版本的默认下载，则在第2285行。否则，请搜索[class^="icon-"], [class*=" icon-"]，这是应用背景图像的选择器。您还需要更改下一组选择器中的"inverse"路径。您在那里看到的..表示浏览器应该从CSS文件位置上面一级请求资源，因此它会解析为来自站点根目录。 - Tieson T.