Articles in this section
Category / Section

How to solve font icons missing issue when host the sample in IIS?

2 mins read

This KB illustrates that how to solve font icons missing issue when host the sample in IIS.

Solution:

You can solve the missing font icons issue through the MIME Types and Request Filtering options available in Internet Information Services (IIS) Manager.

Steps to add font icon file types in MIME types:

  1. Open IIS and select your website.
  2. You can see MIME Types on right-hand side section.

 

C:\Users\ramesh.govindaraj\Desktop\sshot-2.png

 

  1. Double click the icon MIME Types and a window will appear.
  2. Then click "Add" available in right-hand side section.
  3. A dialog will open which asks File Name extension and MIME Types.

 

C:\Users\ramesh.govindaraj\Desktop\sshot-3.png

 

  1. Add the file information where the font icons are available.
  2. For example,

    

S.No

File Name Extension

MIME Types

1.

.eot

application/vnd.ms-fontobject

2.

.ttf

application/octet-stream

3.

.svg

image/svg+xml

4.

.woff

application/font-woff

5.

.woff2

application/font-woff2

 

If you do not have access to the IIS Manager, you can add these declarations in your web.config file, inside <system.webServer> section.

web.config:

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

If you are still facing any problems and if IIS is still is not serving the files, then try removing the MIME type declaration and re-declare it. See the example below for the .woff MIME type.

web.config:

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

STEPS TO ADD FONT ICON FILE TYPES IN REQUEST FILTERING:

  1. Open IIS and points your website.
  2. You can see Request Filtering on right-hand side section.

 

C:\Users\ramesh.govindaraj\Desktop\sshot-4.png

 

  1. Double click the icon and a window will appear.
  2. Then click “Allow File Name Extension” available on the right-hand side.
  3. A dialog will open where you can add the file extension.

 

C:\Users\ramesh.govindaraj\Desktop\sshot-5.png

 

If you do not have access to the IIS Manager, you can add these declarations in your web.config file, inside <system.webServer> section.

web.config:

 
<system.webServer>
    <security>
      <requestFiltering>
        <fileExtensions>
          <add fileExtension=".woff" allowed="true" />
          <add fileExtension=".ttf" allowed="true" />
          <add fileExtension=".woff2" allowed="true" />
        </fileExtensions>
      </requestFiltering>
    </security
</system.webServer>
 

 

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied