Bootstrap and font-awesome in MVC4

Question

I am using MVC4 and have added Bootstrap and Font Awesome via nuget.

I can see how Bootstrap gets bundled in via BootstrapBundleConfig.cs (which was added by the nuget package) below:

public static void RegisterBundles()
{
    BundleTable.Bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap*"));
    BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap").Include("~/Content/bootstrap.css", "~/Content/bootstrap-responsive.css"));
}

I have the following questions:

1. For font-awesome, I don't see similar bundling code to the above for registering the required css files, is there any, or do i just link to the stylesheet in the content directory <link href="~/Content/font-awesome.min.css" rel="stylesheet" /> - what is the proper way?
2. For bootstrap, if I do not want a responsive layout, would I just comment out the bootstrap-responsive.css from Include("~/Content/bootstrap.css", "~/Content/bootstrap-responsive.css"))?

Answer 1

You can read more about how bundling works on the asp.net site.

It seems that the BootStrap nuget package has made some bundles for you. You could modify this to include Font Awesome in the existing bundle, or make it it's own bundle

e.g.

public static void RegisterBundles()
{
    BundleTable.Bundles
        .Add(new ScriptBundle("~/bundles/bootstrap")
        .Include("~/Scripts/bootstrap*"));

    // Either add it to the  existing bundle
    BundleTable.Bundles
        .Add(new StyleBundle("~/Content/bootstrap")
        .Include("~/Content/bootstrap.css", 
                "~/Content/bootstrap-responsive.css",
                "~/Content/font-awesome.css"));

    // Or make it it's own bundle
    BundleTable.Bundles
        .Add(new StyleBundle("~/Content/font-awesome")
        .Include("~/Content/font-awesome.css"));

}

Then, you need to make sure that your _layout.cshtml renders these bundles (the Bootstrap nuget may not have done this for you).

e.g.

@Styles.Render("~/Content/bootstrap")

// Or, if you made it it's own bundle
@Styles.Render("~/Content/font-awesome")

If you don't want to include ~/Content/bootstrap-responsive.css in your bundle, simple delete this string from the Include method.