Glyphicons with error when publishing to IIS

Question

I’m developing an application with Asp.net-mvc-5 and Bootsrap 3.3.5. In the visual studio, it works perfectly. However, when publishing the application in IIS 8, the bootstrap-glyphicons appear with a sign of "?".

Searching a little, I read that could be problems with the source files, so I downloaded it directly from the site and replaced it. However, to no avail.

In other cases, it was that the file was not localized and the download was not done, however, when debugging through Chrome, I see that it is downloading normally, as can be seen in the image below:

In other cases, I read about the MIME Type in the IIS. In this case, I tried to add this code to my Web.Config:

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff2" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="font/truetype" />
      <remove fileExtension=".otf" />
      <mimeMap fileExtension=".otf" mimeType="font/opentype" />
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff2" mimeType="font/x-woff" />
    </staticContent>
  </system.webServer>

And in the IIS is configured this way:

But anyway, in the application continues to show the sign of "?", as in the image below:

<a href="@Url.Action("SubirSequenciaCorrecao", new { id = item.Sequencia })" title="Subir" id="submitbtn">
    <span class="glyphicon glyphicon-arrow-up" />
</a>

When running the application in Visual Studio, published in Local IIS, it works normally.

Editing

Analyzing the Sources in the console, I saw that there is a difference in the files that Browser "thinks".

In the application running on IIS, are these:

Running in Visual Studio, these are:

I noticed that if the bootstrap.css of Bundlesconfig, icons appear normally. Mine Bundlesconfig is as follows:

public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/application").Include(
                       "~/Scripts/application.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                       "~/Scripts/jquery-ui.min.js"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new ScriptBundle("~/bundles/dataTables").Include(
                      "~/Scripts/jquery.dataTables.min.js",
                      "~/Scripts/dataTables.bootstrap.js"));

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

            bundles.Add(new StyleBundle("~/Content/dataTable").Include(
                       "~/Content/dataTable/css/jquery.dataTables.min.css",
                        "~/Content/dataTable/css/jquery.dataTables_themeroller.css"
                    ));

        }
    }

Answer 1

Apparently it’s a problem in the Bundling. Try using another Bundle Transformer, like Yui, and see what happens.

Example of use:

var cssBundle = new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css");
cssBundle.Transforms.Add(new CssTransformer(new YuiCssMinifier()));
bundles.Add(cssBundle);

Answer 2

I had the same problem.

Not to use a new engine (as @Ciganomorrisonmendez quoted) the solution was to correctly set the responseEncoding and requestEncoding of the application.

I used to use:

<system.web>
    <globalization requestEncoding="Windows-1252" 
                   responseEncoding="Windows-1252" 
                   responseHeaderEncoding="Windows-1252" />
    ...
</system.web>

Switching to UTF-8, Glyphicons worked normally:

<system.web>
    <globalization requestEncoding="utf-8" 
                   responseEncoding="utf-8" 
                   responseHeaderEncoding="utf-8" />
    ...
</system.web>

If you don’t have the tag globalization configured in the web config. of your application, is probably configured directly in IIS, in: Seuserver > . Net Globalization > Encoding.