How do I path relative CSS paths correctly when using Visual Studio 2012 Bundling?

Question

I have an MVC 3 / .NET 4.0 application running on Visual Studio 2012.

I just created a static bundle for all my JS and CSS files.

It first squawked at me for using paths without "~/" at the beginning, but I need to include files that are in another virtual directory on my server, so I used /../ to get them.

My bundle looks like this:

Bundle css = new Bundle("~/MyCSS", typeof(CssMinify));
css.AddFile("~/Content/css/Site.min.css");   
css.AddFile("~/../CommonWeb/css/fontawesome/css/font-awesome.css");   
BundleTable.Bundles.Add(css);

I'm trying to include font-awesome. It finds the CSS file just fine, but none of the fonts and icons are coming in. I'm guessing it is lines like this that cause the problem:

src: url('../font/fontawesome-webfont.eot');  /* From Font-Awesome */

Any thoughts on how to fix this? Thanks!

EDIT: More information:

When looking at the request for a relative CSS path, it goes after the root of my server:

http://localhost/font/fontawesome-webfont.woff

Instead of

http://localhost/CommonWeb/css/fontawesome/font/fontawesome-webfont.woff

Answer 1

CSS is parsed by the browser. URL's within CSS are relative to the CSS file's location. Not to the HTML page.

So just check where your fonts are uploaded, and they should work fine.