Why Are My Bootstrap Icons Not Showing Online?

Can't Access Bootstrap Icons Online

Encountering a peculiar issue where Bootstrap icons display correctly locally but not when the website is accessed online? This can be traced back to an issue with how browser attempts to access fonts.

Locally, the browser knows to search for Content/fonts/glyphicons-halflings-regular.woff to load the icon font. However, when the website is loaded online, it attempts to access the font at /fonts/glyphicons-halflings-regular.woff.

To resolve this issue, consider adjusting your bundle configuration. Specifically, make sure that the bundle name includes the "Content" prefix.

Adjusted Bundle Configuration

For example, if the website's file structure is organized as follows:

Content/

bootstrap/
    bootstrap.css
    fonts/
        glyphicons-halflings-regular.woff

The bundle configuration should resemble:

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

By incorporating the "Content" prefix in the bundle name, you explicitly instruct the browser to search for the bundled files in the corresponding directory. This ensures that the browser can accurately locate and render the Bootstrap icons, regardless if the website is accessed locally or online.

The above is the detailed content of Why Are My Bootstrap Icons Not Showing Online?. For more information, please follow other related articles on the PHP Chinese website!