4

Created ASP.Net MVC 5 web project and installed Twitter.Bootstrap.Less 3.0.1 and FontAwesome.less 4.0.3 NuGet Packages.

Changed Content/fontawesome/variables.less to use
@fa-font-path: "fonts";

Changed Content/bootstrap/variables.less to use
@icon-font-path: "fonts/";
@icon-font-name: "fontawesome-webfont";

Changed Content/bootstrap/bootstrap.less to replace glyphicons import to
@import "../fontawesome/font-awesome";

Compiled LESS source into bootstrap.css at build-time using RECESS. For more details, see here.

All this works great in debug mode. But fontawesome icons do not appear in release mode i.e. when debug attribute is removed from web.config or when BundleTable.EnableOptimizations = true; is added in the BundleConfig.cs.

Icons are shown as square box in Chrome and blank space in IE 10.

Any idea what may be missing here?

Community
  • 1
  • 1
Santosh
  • 2,430
  • 5
  • 33
  • 47

1 Answers1

2

[Solution] Changed the virtual path of the style bundle to use "~/Content/css" instead of "~/bundles/css" and the problem got fixed.

The bundle path "~/bundles/css" is supposed to be virtual and should not exist on the file system. It is used as a name and not as a path to a physical file. If this path exists on the file system, the bundle will not get loaded. I could see all the unicode characters were missing from the compiled bootstrp.css.

This is not mentioned in any documentation which is weird!

Santosh
  • 2,430
  • 5
  • 33
  • 47