Bootstrap Icons Not Showing in Published ASP.NET MVC Application

Bootstrap Icons not showing in published ASP.NET MVC application

If your bundling your scripts and CSS then assets like images may not be found.

In your BundleConfig.cs file, create your bundle with CssRewriteUrlTransform:

bundles.Add(new StyleBundle("~/Content/css/bootstrap").Include("~/Content/bootstrap.min.css", new CssRewriteUrlTransform()));

Include in _Layout.cshtml:

@Styles.Render("~/Content/css/bootstrap")

Everything should be good. And yes, viewing what's happening over the network to see what URL is generating the 404s will help.

EDIT:
Ensure you are using Microsoft.AspNet.Web.Optimization v1.1.0. Confirmed version 1.1.3 causes this error as well.

Font awesome icons not showing up in ASP.NET CORE MVC Project

Check the console+network tab on chrome developer tools (f12)

If you hosted application on local IIS, most of the time IIS doesn't allow mime type .woff by default. you can add mime type using web.config

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  </staticContent>
</system.webServer>

Another reason would be the relative path between CSS files and font files not matching.
since you are using the same directory structure provided with the FontAwesome, I don't
think this would be the problem.

Why font-awesome works on localhost but not on web ?

I've just loaded your webpage and checked the net tab of firebug.

your following urls returned a 404:

http://www.senocakonline.com/Content/font/fontawesome-webfont.woff

http://www.senocakonline.com/Content/font/fontawesome-webfont.ttf

i would assume that those being missing is the reason your icons aren't displaying.

UPDATE: 23.10.2015
to make it available just add this code to your WebConfig:

<system.webServer>
    <staticContent>
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

Bootstrap. Glyphicons are not loaded on remote server. Folder cannot be found

The reason for my problem is that VS2010 was not copying the requested file into remote server folder when tried to deply the application. I had to copy them myself.

To solve the problem, I had to open window Properties, go to Bootstrap's Fonts folder, click on each file there, and set Build Action to Content.

Fonts files are not being included when publishing MVC application VS2013

A temporary solution,

Select your font files and Change Build action as Content from Properties Window. This fixes it in the immediate, but leaves you open to missing files in the future.

To permanently fix this issue this may help,

You can fix this permanently by modifying the default Build Action for font file extensions (.eot, .ttf, etc)

Visual-Studio-default-build-action-for-non-default-file-types

Bootstrap icons are loaded locally but not when online

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.

---

Related Topics