Bootstrap 3 Glyphicons are not working in window mobile

Question

Bootstrap 3 Glyphicons are not working in window mobile. They are working in other devices(Expect window phone)

Answer 1

As Mathew Hintzen has posted, the easiest way is to include the MIME specification in your web.config. Also, as he pointed out, this will cause 500 Internal Server Errors if you are using the Bundling of styles/scripts:

<configuration>
   ...
   <system.webServer> 
      ...
      <staticContent> 
         ...
         <mimeMap fileExtension=".woff" mimeType="font/x-woff" /> 
      </staticContent> 
   </system.webServer> 
</configuration>

To answer the OP's question AND to fix the 500 Internal Server errors, include a 'remove' statement before setting the static content:

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

This will load the font files on Windows Mobile / Internet Explorer Mobile (IE Mobile) AND the web server will continue to serve other bundled files to other browsers/clients.

I hope this helps. Happy Coding!

Answer 2

this is may because your Glyphicons font file is not responding from the server, add a MIME type like with [file name extension : .woff, MIME type : font/x-woff].

To add a MIME type ...

     --->start
     --->Internet Information Services manager (IIS manager)
     ---> select the site
     --->add a MIME type like with [file name extension : .woff, MIME type : font/x-woff].

Answer 3

The easiest way is to include the MIME specification in your web.config as suggested by user2959178 in the comments above

<configuration> 
   ...
   <system.webServer> 
      ...
      <staticContent> 
         ...
         <mimeMap fileExtension=".woff" mimeType="font/x-woff" /> 
      </staticContent> 
   </system.webServer> 
</configuration>

WARNING: While this will fix the windows mobile, it CAN cause all other browsers to break with internal server errors of 500 if you are using the Bundling of Styles.

Answer 4

I have this issue as well. My current solution is to use text fallbacks in buttons.

<button class="btn btn-default"><span class="glyphicon glyphicon-ok"> 
OK
</span></button>

It is not a design fix but it makes the product functional.

Note that we have tested several browsers on several different mobiles brands (ios, android, windows phone, firefox, chrome, IE 8, IE 11). The problem only occurs on windows phone. I have a Nokia Lumia 920 WIndows 8.

You can read a bit more on the bootstrap page for other documented fixes here: http://getbootstrap.com/getting-started/#browsers .