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:

enter image description here

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.

Tieson T. · Accepted Answer · 2013-09-15 22:07:33Z

3

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.

edited Sep 15, 2013 at 22:07

answered Sep 15, 2013 at 21:43

Tieson T.

21.2k6 gold badges82 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

John Mayer Over a year ago

Ahh I've changed it to ScriptBundle however the icon still doesn't show up.

Tieson T. Over a year ago

If you open Firebug (or your browser's native dev tools), do you see a 404 error on the sprite file?

Tieson T. Over a year ago

Okay, and what is the exact path that Bootstrap is trying to load the sprite file from?

John Mayer Over a year ago

It attempts to load from: /img/glyphicons-halflings.png NOT Content

Tieson T. Over a year ago

Yeah, without a initial . that path will resolve from the site root. So either change it to /content/img/glyphicons-halflings.png or add the . at the beginning.

|

Collectives™ on Stack Overflow

How to include Bootstrap icons in ASP.NET MVC4?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related