IcoMoon font-face does not render with ASP.NET Web Optimization about bootmetro HOT 12 CLOSED

Hi, I'm implementing BootMetro in a customer project with MVC4 using bundles, and all is rendering without problems. Are you sure that the path to icomoon.css is correct? Use Firefox+Firebug or Chrome dev tools to check the css.

from bootmetro.

It works when I create a bundle that ends with "IconMoon.css" but not when I add it to a bundle with other CSS files. Here is my project structure:

/Content
./bootmetro
../css
.../bootmetro.css ...
.../icomoon.css
../font
.../IcoMoon.tff ...

Here is my bundle configuration:

// Includes bootmetro.css and icomoon.css in the same bundle
bundles.Add(new StyleBundle("~/Content/bootmetro/css/bundle").
            Include("~/Content/bootmetro/css/*.css"));

And the markup renders as follows, which looks good to me:

<link href="/Content/bootmetro/css/bundle?v=145zuetRKrzG2g0Mg--K1hfCQv7bm-xYVL4CHqXYBK01" rel="stylesheet"/>
...
<a id="Logo" class="icon-archive" href="#"></a>

The icon never shows. FireBug shows the style as font-family: 'IcoMoon'; with the font name gray-out as though it cannot find the font. When I disable optimizations, every thing works fine. How is your project structure or bundle different from mine?

P.S. Just notice the "Support the Project" link. Is that new? Donation forthcoming, as bootmetro rocks.

from bootmetro.

Ah-hah! It is the order in which you specify the CSS files, as alphabetical ordering does not suffice. Everything works as expected if I change my bundle configuration to the following:

bundles.Add(new StyleBundle(StyleBundle).
            Include("~/Content/css/bootstrap*", "~/Content/css/bootmetro*", 
            "~/Content/css/meto-ui-light.css", "~/Content/css/icomoon.css",
            "~/Content/css/date*", "~/Content/css/Site.css"));

Self-service tastes best, though the docs might want to specify the order is important.

from bootmetro.

Er, I was mistaken. That did not fix my problem, as I failed to enable optimizations. When I force it, I get no IcoMoon fonts.

from bootmetro.

Here the code I use in my BundleConfig.cs:

      public static void RegisterBundles(BundleCollection bundles)
      {
         // Scripts
         // ------------------------------------------------------------
         bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                     "~/Scripts/jquery-{version}.js"));

         bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                     "~/Scripts/jquery.unobtrusive*",
                     "~/Scripts/jquery.validate*"));

         bundles.Add(new ScriptBundle("~/bundles/js").Include(
                     "~/Scripts/bootmetro*",
                     "~/Scripts/bootstrap-responsive"
                     ));

         // Use the development version of Modernizr to develop with and learn from. Then, when you're
         // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
         bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));

         // Styles
         // ------------------------------------------------------------
         bundles.Add(new StyleBundle("~/Content/css").Include(
                     "~/Content/css/bootmetro.css",
                     "~/Content/css/datepicker.css",
                     "~/Content/css/bootstrap-fileupload.css",
                     "~/Content/css/daterangepicker.css",
                     "~/Content/css/bootstrap-responsive.css",
                     "~/Content/css/metro-ui-light.css",
                     "~/Content/css/icomoon.css",
                     "~/Content/css/site.css"
                     ));
      }

Note that here I'm using the bootmetro.css from 1.0 branch.

from bootmetro.

Are you sure you have optimizations enabled? I ask because the "~/Content/css" virtual path you passed into StyleBundle points to a real directory, which yields an empty response for me. Also, where is your font directory relative to ~/Content/css?

I'm using .NET 4 rather than 4.5. Could that be the difference?

from bootmetro.

I don't have the empty response problem.... The fonts are located in ~/Content/font folder.
And I'm using .NET 4.5. In theory bundles should work only in 4.5, not in lower version of .net....

from bootmetro.

Hmm, even in .NET 4.5, changing the bundle's virtual path to a directory that really exists on disk results in a "403 Forbidden" with optimizations enabled because you cannot request a directory unless "directory browsing" is enabled. Could it be because I am using IIS Express? Are you using full-blown IIS instead? You're sure optimizations are enabled by turning debug = false in web.config or setting BundleTable.EnableOptimizations = true?

from bootmetro.

ok got it.
First: ensure that the virtual path in BundleConfig don't match an existing physical path, I changed mine to: "/Content/styles" and accordingly in the layout: @Styles.Render("/Content/styles")
Second: in the IcoMoon.css replace all the string url('../font with url('/Content/font

et voilà! ;)

from bootmetro.

So did you reproduce the scenario of the browser not rendering the IcoMoon fonts with optimizations enabled?

I think it is something about the web-optimization framework itself, as it doesn't even work when I specify the font with an absolute URL as follows:

@font-face { 
    font-family: 'IcoMoon'; 
    src: url('http://localhost/opt4_5/Content/font/IcoMoon.eot'); 
    /* ... */
}

I will ask a dedicated question on Monday at Stackoverflow. This question seems to be struggling with the same issue.

from bootmetro.

Initially I was starting the project with debug=false, so all was working correctly, sorry about that; but when I enabled optimizations it was clear that in the bundled css, with all the css mixed in one file only, the relative apth in the icomoon.css was clearly wrong; also if you set a virtual path the same of an existing physical path, mvc give precedence to the physical one.

I suggest you to not use a full url in css, instead of url('http://localhost/opt4_5/Content/font/IcoMoon.eot'); you should use url('/Content/font/IcoMoon.eot'); or when you'll deploy the app in production with a different address you'll face various...headaches! ;)

Make sure to check the rendered html that the paths are resolved correctly, also in the bundle configuration.
I close this issue because it is more related to Asp.Net and not on bootmetro.

from bootmetro.

I tried doing the same with FontAwesome, and it rendered the fonts with optimizations enabled. I wonder if it has something to do with the IcoMoon fonts themselves.

from bootmetro.