2

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?

Dave Clemmer
  • 3,741
  • 12
  • 49
  • 72
  • 1
    Do take a look here: http://stackoverflow.com/questions/19664287/bootstrap-icons-are-loaded-locally-but-not-when-online/19665035#19665035. HTH. – Gaurav Mantri Nov 15 '13 at 20:54
  • Thanks Gaurav, I'll check that out, I've already had to fiddle with the metro bundle config name. – Dave Clemmer Nov 15 '13 at 21:15
  • Gaurav, the solution you posted there solved the issue here as well. Post an answer here and I'll accept. :-) – Dave Clemmer Nov 15 '13 at 21:35

1 Answers1

2

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.

Gaurav Mantri
  • 128,066
  • 12
  • 206
  • 241
  • 1
    Thanks Gaurav, I'll also ping the developer of the Metro UI Nuget package to make a similar update. – Dave Clemmer Nov 16 '13 at 17:54
  • That would be really helpful Dave. Thank you. We are also planning on updating to Metro UI CSS version 2.0 in the coming days. – Gaurav Mantri Nov 16 '13 at 17:55
  • I'm also going to give version 2.0 a shot soon. – Dave Clemmer Nov 16 '13 at 17:57
  • Sounds like they made the package updates, and also to the version 2.01 package that just came out: https://github.com/sirkirby/Metro-UI-CSS-nuget/issues/2#issuecomment-28745471. – Dave Clemmer Nov 19 '13 at 04:42
  • We looked at version 2.0 today and there have been some really drastic changes. For the time being, we have decided to stay on the current version as we think it won't be a straight forward upgrade. – Gaurav Mantri Nov 26 '13 at 15:22