Home > Enterprise >  ASP.NET MVC font-awesome works on localhost but not on the web (IIS)
ASP.NET MVC font-awesome works on localhost but not on the web (IIS)

Time:08-19

I saw many solutions on stackoverflow but they doesn't works for me, that's the reason why I wrote this again.

At first I thought IIS is not serving the files, there for i removing the MIME type declaration before re-declaring it.

<system.webServer>
    <staticContent>
          <remove fileExtension=".eot" />
          <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
          <remove fileExtension=".ttf" />
          <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
          <remove fileExtension=".svg" />
          <mimeMap fileExtension=".svg" mimeType="image/svg xml" />
          <remove fileExtension=".woff" />
          <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
          <remove fileExtension=".woff2" />
          <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
</system.webServer>

Then I add in the BundleConfig:

bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/bootstrap.min.css",
                "~/Content/body.css",
                "~/Content/site.css",
                "~/Content/form.css",
                "~/Content/bootstrap-datepicker.min.css"
            ).Include("~/Content/font-awesome.css", new CssRewriteUrlTransform()));

and add in the file _Layout.cshtml :

@Styles.Render("~/Content/fontawesome") 

From the NuGet-Paket-Manager I installed:

  • FontAwesome.MVC v1.00
  • FonAwesome v.4.0.3

Then I tried these examples in the index.cshtml

<i ></i> ban
<i  aria-hidden="true"></i> trash
<i  aria-hidden="true"></i> pdf

It has to run at Edge Chromium

You can see Visual Studio 2017 (included IIS):

Visual Studio

And here the IIS V 10.0.14393.0 .

enter image description here

Does someone have any idea how to solve the problem?

CodePudding user response:

According to your description, the fonts are displayed correctly locally, but when loaded on the server, only blank squares are displayed. The possible reason is the filename mentioned in the src attribute of the FontAwesome CSS file is not the same as the actual font filename.

For more details you can refer to this link.

  • Related