Bootstrap icons load locally but not on the web

Question

I basically 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 normally on the button, but when I run on Windows Azure, I get the following button with a strange view prefix instead of the icon:

In this I realized that when accessing my site locally, the browser will try to download the file: / Content / fonts / glyphicons -halflings-regular.woff (which he did successfully) while online (on blue) it will try to download: / fonts / glyphicons -halflings-regular.woff

Why doesn't it put the / Content prefix, which it does locally.

I use standard bootstrap files, and these are ACCURATE websites working locally and online.

I also link the content as follows:

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

And the file structure is as follows:

Bootstrap also looks for files like this:

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

Therefore, I assume that it will look in the “Content” folder and not “root”, since it is currently located in the Content / bootstrapcss folder.

Answer 1

We recently had a similar problem (although we used metroUI - http://metroui.org.ua/ ). In fact, it turned out that we linked the css files, and because of this, when we deployed the application to Windows Azure, none of the fonts were downloaded.

In our case, we had the following directory structure:

and modern.css referenced type fonts

 ../fonts/iconFont.eot 

and we linked the css file as follows:

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

Because of the binding, the application looked for fonts in the /fonts directory in the root of the application, which was clearly not there.

In short, we have finished changing the package name:

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

As soon as the package name was changed, everything began to work fine.

Answer 2

If you downloaded theme.zip or theme.rar, which includes bootstrap icons, before extracting, follow these steps:

• right click on the compressed package
• check the box "unlock" if it is visible.

Answer 3

For the icons to work, I had to set permissions on the "every = read" folder in the folder in which the image was

Answer 4

Changing the path works, but the “answer question” missed one vital point.

If you use _Layout.cshtml , which refers to the package, this will no longer work locally on Azure.

You also need to refresh the _Layout.cshtml page!

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