CODEWITHSUNDEEP
c#cssasp.net-mvc-4azureazure-web-roles
Dave Clemmer
Dave Clemmer

Reputation: 3781

Trouble with CSS Icon Generated Content in a published Azure Web Role

I have an MVC4 web application that I'm trying to publish as an Azure web role. The website is utilizing Metro UI CSS.

Overall, the published web role is functioning as expected, but the issue I'm having is with CSS generated content. Take for example the following snippet for an icon in the Metro UI modern.css:

.metrouicss .icon-arrow-right-3:before {
    content: "\e09d";
}

The generated content corresponds to the following glyph in the associated font files:

<glyph unicode="&#xe09d;" d="M 288.00,352.00L 224.00,352.00L 320.00,256.00L 128.00,256.00L 128.00,192.00L 320.00,192.00L 224.00,96.00L 288.00,96.00L 416.00,224.00  zM 256.00,480.00C 114.615,480.00,0.00,365.385,0.00,224.00s 114.615-256.00, 256.00-256.00s 256.00,114.615, 256.00,256.00S 397.385,480.00, 256.00,480.00z M 256.00,0.00
    C 132.288,0.00, 32.00,100.288, 32.00,224.00S 132.288,448.00, 256.00,448.00s 224.00-100.288, 224.00-224.00S 379.712,0.00, 256.00,0.00z"  />

The use of these icon css classes works as expected when running the application locally, and when I run the cloud emulator locally:

page with icons showing

However, the published version is not showing the icon images:

page with icons not showing

In the web project, the icon font files are of build action Content (do not copy) just like the css files.

Are there any particular configuration settings that are needed for the Azure web role to publish and/or recognize the generated content? Or otherwise some tips on finding out what's going wrong on the published instance?

Upvotes: 2

Views: 829

Answers (1)

Gaurav Mantri
Gaurav Mantri

Reputation: 136206

As mentioned in my other answer, change the name of the bundle for CSS files. The problem is coming because metroUI looks for icon fonts using relative path (it goes one level up and then looks for fonts folder) and is not able to find that folder.

So if you're bundling your metroUI css files like:

bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/css/modern.css",
                "~/Content/css/modern-responsive.css"));

change it to

bundles.Add(new StyleBundle("~/Content/css/metroUI").Include(
                "~/Content/css/modern.css",
                "~/Content/css/modern-responsive.css"));

and that should do the trick.

Upvotes: 2

Related Questions