Why are Bootstrap icons loaded locally but not displaying online?

Bootstrap Icons Loaded Locally but Not Online

When loading a simple Bootstrap button with an icon locally, the icon displays correctly. However, after deploying the application to Windows Azure, the icon is replaced with a strange prefix. This issue arises because the application attempts to load the icon file from different locations locally and online.

Locally, the browser loads the icon file from /Content/fonts/glyphicons-halflings-regular.woff, while online, it attempts to load it from /fonts/glyphicons-halflings-regular.woff. The key difference is the absence of the /Content prefix in the Azure URL.

To resolve this issue, ensure that the bundled CSS files correctly reference the icon file's location. In this example, the CSS file references the icon using the path ../fonts/glyphicons-halflings-regular.woff. As the CSS file is bundled, the application looks for the icon file in /fonts at the application root, which is incorrect.

To fix this, rename the bundle to include the /Content prefix, as follows:

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

This ensures that the bundle name matches the desired file path, and the application correctly loads the icon file when deployed to Azure.

The above is the detailed content of Why are Bootstrap icons loaded locally but not displaying online?. For more information, please follow other related articles on the PHP Chinese website!