How to solve font icons missing issue when host the sample in IIS?
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:
- Open IIS and select your website.
- You can see MIME Types on right-hand side section.
- Double click the icon MIME Types and a window will appear.
- Then click "Add" available in right-hand side section.
- A dialog will open which asks File Name extension and MIME Types.
- Add the file information where the font icons are available.
- 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:
- Open IIS and points your website.
- You can see Request Filtering on right-hand side section.
- Double click the icon and a window will appear.
- Then click “Allow File Name Extension” available on the right-hand side.
- A dialog will open where you can add the file extension.
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>