Glyphicons of bootstrap not showing up after published site to the web server

Question

0.00/5 (No votes)

See more:

C#

When I run my MCV 5 app locally, these Glyphicons work fine. However, after I publish my site to the web server, these glyphicons don't show on the published site.

Below is in my bundleConfig.cs:

bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/font-awesome.css",
"~/fonts/glyphicons-*",
"~/Content/site.css"));

BundleTable.EnableOptimizations = false;

Below is the default font setting of Bootstrap.css version 3.3.7:

@font-face {
font-family: 'Glyphicons Halflings';

src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Does anyone know how I can fix this? The fonts folder is at the root level. Note: I am not using the "min" .css or .js version.

Thank you.

What I have tried:

I have tried moving the fonts folder path to the "Content" folder but that didn't solve the problem. Suggestions please? Thank you.

Posted 20-Dec-16 7:17am

blumonde -

Updated 21-Dec-16 9:32am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2016-12-20T08:29:00

Solution 1

Firstly, remove the "~/fonts/glyphicons-*" line from your bundle config. This will try to render the raw bytes of the font files as CSS, which will not work.

The most likely problem is that IIS doesn't know the MIME type for the font files. For security reasons, IIS will not serve any file where it doesn't know the MIME type.

To fix it, add a web.config file to your fonts folder with the following content:

XML

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

Posted 20-Dec-16 8:29am

Richard Deeming

Comments

blumonde - 21-Dec-16 9:04am

@Richard, Thank you for the suggestion. I am a bit confused when you say 'add a web.config file to your fonts folder'. I have no idea what do you mean by that; I do have a web.config file at the root of my project. Is that the file you suggested I add those mimeMap lines to? Thank you.

Richard Deeming 21-Dec-16 9:07am

Create a new file called "web.config" in the fonts folder, and replace the content with the example I posted.

blumonde - 21-Dec-16 9:15am

I tried adding web.config to the font folder too yesterday but it did nothing. Thank you.

blumonde - 21-Dec-16 9:05am

I used Chrome browser debugger and found 3 errors regarding the glyphicon fonts. The errors have status of 403 (forbidden).

Why are they forbidden to load on the web server do you know? How do I fix this?

Thank you.

Richard Deeming 21-Dec-16 9:07am

The 403 response is because IIS doesn't know about the MIME type of the font files.

blumonde - 21-Dec-16 9:16am

Do I need tell to the IIS webmaster to add font permission on the web server? If yes, how is it done? Thank you.

Richard Deeming 21-Dec-16 9:21am

You need to configure the MIME types - as I explained in my answer!

blumonde - 21-Dec-16 9:33am

I tried adding web.config to the font folder again with the code below but it still didn't work:

<configuration>
<system.webserver>
<staticcontent>
<mimeMap fileExtension="eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension="otf" mimeType="application/x-font-opentype" />
<mimeMap fileExtension="svg" mimeType="image/svg+xml" />
<mimeMap fileExtension="ttf" mimeType="application/x-font-truetype" />
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
<mimeMap fileExtension="woff2" mimeType="application/font-woff2" />

Richard Deeming 21-Dec-16 9:39am

You need to copy the entire content of the code block, from the opening <configuration> tag to the closing </configuration> tag. You've missed off all of the closing tags.

You also need to remember that XML is case-sensitive. <system.webserver> is not the same as <system.webServer>, and <staticcontent> is not the same as <staticContent>. If you change the case, it won't work.

Make sure that you haven't got Windows Explorer set to hide file extensions. If you have, there's a chance your file might be called something like web.config.txt; it needs to be called web.config, with no extra extensions.

If it still doesn't work, open the folder in IIS Manager, and double-click on the MIME Types icon to see if there are any errors.

blumonde - 21-Dec-16 9:48am

I did have everything like you said. This website cut off the closing tags ( of my previous post. Also, the extension is correct. My WE is not set to hide extensions.

blumonde - · Answer 2 · 2016-12-21T09:32:00

Solution 3

In case anyone else has the same problem, the system admin fixed it by adding file types to the IIS manager.

Posted 21-Dec-16 9:32am

blumonde -