Icons not shown while using Bundling

Question

I am using Bundling for my CSS and use that in my MVC Layout.cshtml page. The CSS files are included correctly but the icons are not shown properly.

Should i do something to include icons?

MY Bundle code

 bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/Site.css",
            "~/Content/ej/web/ej.widgets.core.min.css",
            "~/Content/ej/web/default-theme/ej.theme.min.css",
            "~/Content/TodoList.css")); 

I am using it in my page as follow

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

But i am getting as follow.

Thanks in advance.

Regards, Madhu

Answer 1

I found the reason and the solution for my issue. I provided the virtual path incorrectly. I changed it as follow and now its working fine.

 // Content css
        bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/Site.css")              
            .Include("~/Content/TodoList.css"));

 // Content ej css
        bundles.Add(new StyleBundle("~/Content/ej/web/css")
        .Include("~/Content/ej/web/ej.widgets.core.min.css")
        .Include("~/Content/ej/web/default-theme/ej.theme.min.css"));

Answer 2

You might need to use CssRewriteUrlTransform.

Rewrites urls to be absolute so assets will still be found after bundling.

Your code might look something like

bundles.Add(new StyleBundle("~/Content/css")
    .Include("~/Content/Site.css")
    .Include("~/Content/ej/web/ej.widgets.core.min.css",
        new CssRewriteUrlTransform())
    .Include("~/Content/ej/web/default-theme/ej.theme.min.css",
        new CssRewriteUrlTransform())
    .Include("~/Content/TodoList.css"));

Answer 3

Specify normal .css files. .Net will automatically pick .min.css files in Release Mode. Make sure both .css and .min.css have Image urls.

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/Site.css",
            "~/Content/ej/web/ej.widgets.core.css",
            "~/Content/ej/web/default-theme/ej.theme.css",
            "~/Content/TodoList.css"));