11

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:

enter image description here 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:

enter image description here

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.

Jordan Axe
  • 3,823
  • 6
  • 20
  • 27
  • Have you tried amending your css files to point to the correct images? Your server will differ with regards to the required syntax compared to a local environment. What is your folder structure on the server? – jezzipin Oct 29 '13 at 16:47
  • Are you bundling css files by any chance? – Gaurav Mantri Oct 29 '13 at 17:12
  • @jezzipin Well I tried adding the folder "fonts" to root and it works now. However now the "fonts" folder is both located at root and in content. How do I remove a folder from azure? I have removed the folder from my visual studio project and published it but it's still on Azure. – Jordan Axe Oct 29 '13 at 17:18
  • @GauravMantri Yes I am – Jordan Axe Oct 29 '13 at 17:18

5 Answers5

15

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:

enter image description here

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.

Gaurav Mantri
  • 128,066
  • 12
  • 206
  • 241
  • I see. I've updated my question with info about my bundle and file locations. I got it like you said already I reckon - still got the issue though. It's being referenced the following way: ../fonts/glyphicons-halflings-regular.woff So I thought it would look one folder up eg. to the content folder and not to the root folder. – Jordan Axe Oct 29 '13 at 17:47
  • 2
    Try changing `~/Content/bootstrapcss` to `~/Content/bootstrapcss/bootstrap` and that should make the difference. Essentially when bundled `bootstrapcss` becomes the name of the file in `Content` folder in application root looking for `Fonts` folder. If the css file is referencing fonts like `../fonts` it goes above `Content` folder. Adding another name would make the css to go up to `Content` folder and then look for `Fonts` folder there which it would find. – Gaurav Mantri Oct 29 '13 at 17:54
  • @GauravMantri, My fonts folder is at the root but I still have the same problem. What should I do? Thanks in advance. – dailyUnknown Dec 15 '16 at 22:38
  • Changing this made the css not load locally..this resolution did not help me – user2903379 Feb 24 '18 at 13:01
  • Changing the bundle name works!... in the publish directory now i see the "Content" folder, and the app works ok. Thanks – César León Jun 27 '19 at 20:30
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.

user2903379
  • 375
  • 3
  • 22
1

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>
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
Preshen
  • 111
  • 1
  • 2
0

If you have downloaded a theme.zip or theme.rar that includes the bootstrap icons, before you extract do this:

  • right click on the compressed package
  • check the box "unblock" if it is visible
JoshYates1980
  • 3,476
  • 2
  • 36
  • 57
0

For icons to work- i had to set the folder permissions to "everyone = read" on the folder that the image was in

cagedwhale
  • 51
  • 4