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.

enter image description here

Thanks in advance.

Regards, Madhu

score 1 · Answer 1 · answered May 13 '14 at 06:14

1

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"));

answered May 13 '14 at 06:14

Rowan Freeman

15,724
11
69
100

Thanks but i cant find the `CssRewriteUrlTransform` in `System.Web.Optimization`? Where could i find it? – Madhu May 13 '14 at 06:25
Make sure you have the [Microsoft ASP.NET Web Optimization Framework](https://www.nuget.org/packages/Microsoft.AspNet.Web.Optimization/). – Rowan Freeman May 13 '14 at 06:33

score 0 · Answer 2 · answered May 13 '14 at 06:17

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"));

score 0 · Answer 3 · answered May 13 '14 at 08:53

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"));

Icons not shown while using Bundling

3 Answers3