How to include Bootstrap icons in ASP.NET MVC4?

Question

Basically after a bunch of work I've finally managed to get up and running with Bootstrap in my ASP.NET MVC4 project.

Here is my folder structure:

Here is my 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"));
         }

However when I try to add an HTML element with an icon:

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

The icon does not appear.

Answer 1

The last bundle needs to be a StyleBundle, not a ScriptBundle. Here's an example from one of my projects:

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

I should note that I organize my CSS files into a specific folder, and this specific project uses FontAwesome in place of the Glyphicons.

As noted from the comments, the default Bootstrap package assumes that the CSS files are in one folder, and that the icon sprite file is in another folder at the same level as the CSS folder. Based on that assumption, the path to the sprite is set to "../img/glyphicons-halflings.png". If your files are not located in the same places, you need to manually edit the path, or use the Customizer to build a download that has the correct path for both the light and the dark versions of the sprite file.