Bootstrap icons are loaded locally but not when online

Basically I got the following HTML:

<button class="disabled btn-primary btn" type="submit" disabled="">
   <i class="glyphicon glyphicon-ban-circle"></i>
   Log in
</button>

Locally the icon displays fine on the button but when I run on Windows Azure I get the following button with a weird looks prefix instead of the icon:

Looking into this, I realized that when accessing my website locally the browser would attempt to load the file: /Content/fonts/glyphicons-halflings-regular.woff (which it did successfully) while when online (on azure) it would attempt to load at: /fonts/glyphicons-halflings-regular.woff

Why does it not put the /Content prefix that it does locally.

I'm using the standard bootstrap files and it is the EXACT same websites running locally and online.

Also I'm bundling the content the following way:

    bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include(
                "~/Content/bootstrap/bootstrap.css"));

And the file structure looks the following:

Also bootstrap is looking for the files like this:

url('../fonts/glyphicons-halflings-regular.woff') 

So I would suppose it would look in the Content folder and not root since it currently resides in the Content/bootstrapcss folder.

Solution 1:

We recently had similar issue (though we were using metroUI - http://metroui.org.ua/). Essentially it turned out we were bundling the css files and because of that when we deployed the application in Windows Azure, none of the fonts were loaded.

In our case, we had the following directory structure:

and modern.css was referencing fonts like

../fonts/iconFont.eot

and we were bundling the css file like this:

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

Because of bundling, the application was looking for fonts in /fonts directory at the application root which was obviously not there.

Long story short, we ended up changing the bundle name:

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

Once the bundle name was changed, things started working properly.

Solution 2:

Changing the path does work but the 'answered question' missed one vital point.

If you're using _Layout.cshtml that references the bundle, this will no longer work locally and on Azure.

You need to update the _Layout.cshtml page too!

So if you change your bundles path from Content/css to Scripts/css then you need to change _Layout.cshtml to @Styles.Render("~/Scripts/css") respetively.

Solution 3:

Encountered this error with ASP.NET Core 2.0 MVC web app when publishing to Azure Web Service.

I had my stylesheets within the following code.

 <environment include="Development">
        <link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet">
        <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" />
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
 </environment>

Simply copying and pasting the links into any environment besides Development worked

<environment exclude="Development">
  <link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" />
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="~/css/site.css" />
  <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
  />
  <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>